Skip to content

Time Input

@astryxdesign/core v0.7.1 · TimeInput

TimeInput Props ​

NameTypeDefaultDescription
v-modelstring | nullnullISO time, HH:MM or HH:MM:SS.
labelstring—Required accessible name.
hourFormat'12h' | '24h''12h'How the value is shown. The model stays 24-hour ISO.
hasSecondsbooleanfalseKeep seconds in the value.
incrementnumber1Minutes added or removed by the arrow keys.
minstring—Earliest ISO time.
maxstring—Latest ISO time.
presentation'text-input' | 'native' | 'adaptive-native' | 'adaptive-bottom-sheet' | 'popover' | 'bottom-sheet''adaptive-native'Typed field, platform time control, or hour and minute wheels. Omitted means typed text on a fine pointer and the platform control on a coarse pointer. adaptive-bottom-sheet uses wheels only on a coarse pointer; bottom-sheet always uses wheels. Seconds, a step other than 1, or a preset interval send the platform control back to typed text. The wheels are unaffected. An explicit value wins over nativePicker.
isLabelHiddenbooleanfalseHides the label visually while keeping it accessible. labelHidden is the older name; either one hides it.
containerClassstring | object | array—Class for the field container. Has no effect, and warns in development, inside InputGroup and in a horizontal-labels FormLayout.
containerStyleStyleValue—Inline style for the field container. Same targeting as containerClass.
controlClassstring | object | array—Class for the bordered control box. A class written on the component lands here too, not on the inner input.
controlStyleStyleValue—Inline style for the bordered control box.
hasClearbooleanfalseShows a clear button.
size'sm' | 'md' | 'lg''md'Field height.
statusFieldStatusInput—Error, warning, or success.
statusVariant'attached' | 'detached' | 'tooltip''attached'Where the status message sits.
isDisabledbooleanfalseDisables the field.
disabledMessagestring—Explains why the field is disabled. With isDisabled, the message shows in a tooltip on hover or keyboard focus and the input stays focusable with aria-disabled; the value still cannot change.
isLoadingbooleanfalseThe field cannot be edited and shows a spinner.
loadingLabelstringLoading / 加载中Screen-reader text for the spinner.
labelTooltipstring—Hint shown from the info icon at the end of the label.
placeholderstringSelect a timeEmpty-state text. While the field is focused and empty, a format hint replaces it.