Preview

Usage

<cs-time-input format="hh:mm" placeholder="hh:mm"></cs-time-input>
<cs-time-input format="hh:mm:ss" placeholder="hh:mm:ss"></cs-time-input>

Properties

aria-labelstring default: null

Adds an aria-label to the native control.

Use this if you don't have a visible label for this control.

aria-requiredboolean

Specifies whether to add aria-required to the native control.

auto-completeboolean

Specifies whether to enable a browser's autocomplete functionality for this input. In some cases it might be appropriate to disable autocomplete (for example, for security-sensitive fields). To use it correctly, set the name property.

auto-focusboolean default: false

Indicates whether the control should be focused as soon as the page loads, which enables the user to start typing without having to manually focus the control. Don't use this option on pages where the control may be scrolled out of the viewport.

disable-browser-autocorrectboolean

Specifies whether to disable browser autocorrect and related features. If you set this to true, it disables any native browser capabilities that automatically correct user input, such as autocorrect and autocapitalize. If you don't set it, the behavior follows the default behavior of the user's browser.

disabledboolean

Specifies if the control is disabled, which prevents the user from modifying the value and prevents the value from being included in a form submission. A disabled control can't receive focus.

formatTimeInputProps.Format default: 'hh:mm'

Specifies the format of the time input.

Use it to restrict the granularity of time that the user can enter.

namestring

Specifies the name of the control used in HTML forms.

placeholderstring default: ''

Specifies the placeholder text rendered when the value is an empty string.

read-onlyboolean default: false

Specifies if the control is read-only, which prevents the user from modifying the value but includes it in a form submission. A read-only control can receive focus.

Don't use read-only inputs outside a form.

use24-hourboolean

Specifies whether the component should use 12-hour or 24-hour format. When using 12-hour format, there is no option for picking AM or PM.

valuestringrequired

Specifies the text entered into the form element.

Events

blurCustomEvent<null>

Called when input focus is removed from the UI control.

changeCustomEvent<InputProps.ChangeDetail>

Called whenever a user changes the input value (by typing or pasting). The event detail contains the current value of the field.

focusCustomEvent<null>

Called when input focus is moved to the UI control.