Input Time

Report issue Edit this page

Easily create nice looking time input.

Usage

Warning This is a brand new component. Please use it with caution and be aware that you may encounter unexpected behavior or errors. If you experience any issues or bugs, please file an issue report so that we can investigate and improve the component.

The Input Time component is a web component built from scratch to allow users to easily select time in a 12-hour format, while outputting the selected time in a 24-hour format. To get started, simply use the <uk-input-time> markup in your HTML code.

Capturing values

There are several ways to capture values from the <uk-input-time> component. The simplest approach is to add a name attribute to the component. When you do this, a hidden input field with the specified name will be automatically generated, allowing you to easily capture the selected value on your server.

<uk-input-time name="time"></uk-input-time>

Saving to a state

If you’re using a reactive framework like React, Vue, or Svelte, you can capture the value by assigning an ID to the <uk-input-time> component and listening for the uk-input-time:input event. Here’s an example implementation in SvelteKit:

  • Something's not working? Feel free to report an issue or edit this snippet . 

    <script lang="ts">
      import { onMount } from 'svelte';
    

      let value: string = $state('');
    

      onMount(() => {
        document.getElementById('time')?.addEventListener('uk-input-time:change', (e) => {
          // @ts-ignore
          value = e.detail.value;
        });
      });
    </script>
    

    <div class="uk-container mt-20 grid grid-cols-2 gap-4">
      <div>
        <div class="uk-h3">Form</div>
        <div class="mt-4">
          <uk-input-time id="time"></uk-input-time>
        </div>
      </div>
      <div>
        <div class="uk-h3">Result</div>
        {#if value}
          The time is: {value}
        {/if}
      </div>
    </div>

Prepopulating values

To prepopulate the Input Time component with an existing value, simply pass the value attribute with a 24-hour time format. To prepopulate with current time, just use the now attribute and it will automatically set the current time as the default value.

<uk-input-time now></uk-input-time>

  • Something's not working? Feel free to report an issue or edit this snippet . 

    <div class="h-10">
      <uk-input-time value="20:00"></uk-input-time>
    </div>
    

    <div class="mt-4 h-10">
      <uk-input-time now></uk-input-time>
    </div>

Size modifiers

There are several size modifiers available. Just add one of the following classes to the cls-custom attribute to make the input smaller or larger.

ClassDescription
.uk-form-xsApplies extra small size.
.uk-form-smApplies small size.
.uk-form-mdApplies medium size.
.uk-form-lgApplies large size.

  • Something's not working? Feel free to report an issue or edit this snippet . 

    <div class="mt-4 h-7">
      <uk-input-time cls-custom="uk-form-xs"></uk-input-time>
    </div>
    

    <div class="mt-4 h-8">
      <uk-input-time cls-custom="uk-form-sm"></uk-input-time>
    </div>
    

    <div class="mt-4 h-12">
      <uk-input-time cls-custom="uk-form-md"></uk-input-time>
    </div>
    

    <div class="mt-4 h-14">
      <uk-input-time cls-custom="uk-form-lg"></uk-input-time>
    </div>

Disable input

To prevent user input, add the disabled attribute to the <uk-input-time> element. This will disable all input fields, making it impossible for users to enter or modify time.

Error state

To indicate an error state in the form, simply add the .uk-form-destructive class to the cls-custom attribute. This will apply a “destructive” state to the component, providing visual feedback to the user.

  • This field is required.

  • Something's not working? Feel free to report an issue or edit this snippet . 

    <div class="space-y-2">
      <label class="uk-form-label text-destructive">Time</label>
      <div class="uk-form-controls">
        <uk-input-time cls-custom="uk-form-destructive"></uk-input-time>
      </div>
      <p class="uk-form-help text-destructive">This field is required.</p>
    </div>

Preventing layout shift

When loading Web Components, there may be a brief delay before the content is fully rendered. This can result in a flash of unstyled content or unprocessed templates. To mitigate this issue, consider setting a predefined height on the parent element to prevent layout shift and ensure a smooth user experience.

<div class="h-10">
  <uk-input-time>...</uk-input-time>
</div>

Internationalization

Available options

NameDescription
amLets you customize “am”.
pmLets you customize “pm”.

Attributes

The following attributes are available for this component:

NameTypeDefaultDescription
autofocusBooleanfalseAutomatically focuses on the first input field when the component is rendered.
cls-customStringAllows you to add custom CSS classes.
disabledBooleanfalseDisables all input fields, making the entire component read-only.
nameStringDefines the name of the input, allowing you to capture its value on your server.
nowBooleanfalseAutomatically set the current time as the default value.
valueStringA time in 24-hour format that will be prepopulated in the input field.

Events

The Input Time component triggers the following events on elements with this component attached:

NameDescription
uk-input-time:inputFired after the value has changed, providing an opportunity to respond to user input.
Customize

Customize your Franken UI experience.