Web Component

Input Time

Easily create nice looking time input.

FrankenstyleKit (aka Franken UI 3.0) is now available. Support for the current version will gradually wind down. It will continue to work, but using the latest version is recommended for new projects so you can benefit from future updates and enhancements.

Usage
Capturing values
Prepopulating values
Size modifiers
Disable input
Error state
Preventing layout shift
Internationalization
Available options
Attributes
Events

Usage

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.

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.

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.

Class	Description
`.uk-form-xs`	Applies extra small size.
`.uk-form-sm`	Applies small size.
`.uk-form-md`	Applies medium size.
`.uk-form-lg`	Applies large size.

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.

Time

This field is required.

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.

Internationalization

Available options

Name	Description
`am`	Lets you customize “am”.
`pm`	Lets you customize “pm”.

Attributes

The following attributes are available for this component:

Name	Type	Default	Description
`force-prevent-rerender`	Boolean	false	Forcefully prevents component rerendering.
`autofocus`	Boolean	false	Automatically focuses on the first input field when the component is rendered.
`cls-custom`	String		Allows you to add custom CSS classes.
`disabled`	Boolean	false	Disables all input fields, making the entire component read-only.
`name`	String		Defines the name of the input, allowing you to capture its value on your server.
`now`	Boolean	false	Automatically set the current time as the default value.
`value`	String		A 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:

Name	Description
`uk-input-time:input`	Fired after the value has changed, providing an opportunity to respond to user input.