TimeInput

TimeInput provides time input with support for 12-hour and 24-hour formats and configurable precision for hours, minutes, and seconds.

Key features:

Time format support: 12-hour and 24-hour formats with customizable display
Precision control: Configure precision for hours, minutes, and seconds
Input validation: Real-time validation with visual feedback for invalid times
Accessibility: Full keyboard navigation and screen reader support
Localization: Automatic AM/PM labels based on user locale

Properties

`autoFocus` (default: false)

If this property is set to true, the component gets the focus automatically when displayed.

`clearable` (default: false)

Whether to show a clear button that allows clearing the selected time

When enabled, it displays a clear button that allows users to reset the time picker back to its initial value. Change the time value in this app and then click the clear button:

<App>
  <TimeInput initialValue="11:30" />
  <TimeInput clearable="true" initialValue="10:20" />
</App>

Example: clearable

<App>
  <TimeInput initialValue="11:30" />
  <TimeInput clearable="true" initialValue="10:20" />
</App>

`clearIcon`

The icon to display in the clear button.

<App>
  <TimeInput initialValue="11:30" clearIcon="trash" />
</App>

Example: clearIcon

<App>
  <TimeInput initialValue="11:30" clearIcon="trash" />
</App>

`clearToInitialValue` (default: true)

Whether the clear button resets the time input to its initial value

`emptyCharacter` (default: "-")

Character to use as placeholder for empty time values. If longer than 1 character, uses the first character. Defaults to '-'

Character to use as placeholder for empty time values. If longer than 1 character, uses the first character. Defaults to '-'.

<App>
  <TimeInput emptyCharacter="." />
  <TimeInput emptyCharacter="*" />
  <TimeInput emptyCharacter="abc" />
</App>

Example: emptyCharacter

<App>
  <TimeInput emptyCharacter="." />
  <TimeInput emptyCharacter="*" />
  <TimeInput emptyCharacter="abc" />
</App>

`enabled` (default: true)

This boolean property value indicates whether the component responds to user events (true) or not (false).

<App>
  <TimeInput enabled="false" initialValue="14:30" />
</App>

Example: enabled

<App>
  <TimeInput enabled="false" initialValue="14:30" />
</App>

`endIcon`

This property sets an optional icon to appear on the end (right side when the left-to-right direction is set) of the input.

`endText`

This property sets an optional text to appear on the end (right side when the left-to-right direction is set) of the input.

`gap`

This property defines the gap between the adornments and the input area. If not set, the gap declared by the current theme is used.

`hour24` (default: true)

Whether to use 24-hour format (true) or 12-hour format with AM/PM (false)

`initialValue`

This property sets the component's initial value.

<App>
  <TimeInput initialValue="14:30:15" />
</App>

Example: initialValue

<App>
  <TimeInput initialValue="14:30:15" />
</App>

`label`

This property sets the label of the component. If not set, the component will not display a label.

`labelBreak` (default: true)

This boolean value indicates whether the TimeInput label can be split into multiple lines if it would overflow the available label width.

`labelPosition` (default: "top")

Places the label at the given position of the component.

Available values:

Value	Description
`start`	The left side of the input (left-to-right) or the right side of the input (right-to-left)
`end`	The right side of the input (left-to-right) or the left side of the input (right-to-left)
`top`	The top of the input (default)
`bottom`	The bottom of the input

`labelWidth`

This property sets the width of the TimeInput component's label. If not defined, the label's width will be determined by its content and the available space.

`maxTime`

Maximum time that the user can select

`minTime`

Minimum time that the user can select

`mute` (default: false)

Whether to mute the beep sound while still firing the beep event

When true, prevents audible beeps but still fires the beep event for programmatic handling.

`readOnly` (default: false)

Set this property to true to disallow changing the component value.

`required` (default: false)

Whether the time input should be required

Marks the time input as required for form validation.

<App>
  <TimeInput required="true" />
</App>

Example: required

<App>
  <TimeInput required="true" />
</App>

`seconds` (default: false)

Whether to show and allow input of seconds

`startIcon`

This property sets an optional icon to appear at the start (left side when the left-to-right direction is set) of the input.

`startText`

This property sets an optional text to appear at the start (left side when the left-to-right direction is set) of the input.

`validationStatus` (default: "none")

This property allows you to set the validation status of the input component.

Available values:

Value	Description
`valid`	Visual indicator for an input that is accepted
`warning`	Visual indicator for an input that produced a warning
`error`	Visual indicator for an input that produced an error

Value	Description
`valid`	Visual indicator for an input that is accepted
`warning`	Visual indicator for an input that produced a warning
`error`	Visual indicator for an input that produced an error

<App>
  <TimeInput validationStatus="valid" initialValue="11:30" />
  <TimeInput validationStatus="warning" initialValue="11:30" />
  <TimeInput validationStatus="error" initialValue="11:30" />
</App>

Example: validationStatus

<App>
  <TimeInput validationStatus="valid" initialValue="11:30" />
  <TimeInput validationStatus="warning" initialValue="11:30" />
  <TimeInput validationStatus="error" initialValue="11:30" />
</App>

Events

`beep`

Fired when a beep sound is played due to invalid input, allowing custom feedback implementations

`didChange`

This event is triggered when value of TimeInput has changed.

Fired when the time value changes. Receives the new time value as a parameter.

The time value changes when the edited input part (hour, minute, second) loses focus or the AM/PM selectro changes.

<App var.selectedTime="No time selected">
  <Text value="{selectedTime}" />
  <TimeInput 
    format="h:m:s a"
    initialValue="07:30:05" 
    onDidChange="(time) => selectedTime = time" />
</App>

Example: didChange

<App var.selectedTime="No time selected">
  <Text value="{selectedTime}" />
  <TimeInput 
    format="h:m:s a"
    initialValue="07:30:05" 
    onDidChange="(time) => selectedTime = time" />
</App>

`gotFocus`

This event is triggered when the TimeInput has received the focus.

Fired when the time picker receives focus.

<App var.isFocused="{false}">
  <Text value="{isFocused 
    ? 'TimeInput focused' : 'TimeInput lost focus'}" 
  />
  <TimeInput
    format="HH:mm:ss a"
    onGotFocus="isFocused = true"
    onLostFocus="isFocused = false"
    initialValue="14:30"
  />
</App>

Example: gotFocus/lostFocus

<App var.isFocused="{false}">
  <Text value="{isFocused 
    ? 'TimeInput focused' : 'TimeInput lost focus'}" 
  />
  <TimeInput
    format="HH:mm:ss a"
    onGotFocus="isFocused = true"
    onLostFocus="isFocused = false"
    initialValue="14:30"
  />
</App>

`invalidTime`

Fired when the user enters an invalid time

Fired when the user enters an invalid time value.

<App var.errorMessage="">
  <Text value="{errorMessage}" />
  <TimeInput 
    onInvalidTime="(error) => errorMessage = 'Invalid time entered'"
    onDidChange="errorMessage = ''" />
</App>

Example: invalidTime

<App var.errorMessage="">
  <Text value="{errorMessage}" />
  <TimeInput 
    onInvalidTime="(error) => errorMessage = 'Invalid time entered'"
    onDidChange="errorMessage = ''" />
</App>

`lostFocus`

This event is triggered when the TimeInput has lost the focus.

Exposed Methods

`focus`

Focus the TimeInput component.

Signature: focus(): void

`setValue`

This method sets the current value of the TimeInput.

Signature: set value(value: any): void

value: The new time value to set for the time picker.

<App>
  <HStack>
    <Button
      label="Set Time to 14:30"
      onClick="picker.setValue('14:30')" />
    <Button
      label="Remove Time"
      onClick="picker.setValue('')" />
  </HStack>
  <TimeInput id="picker" />
</App>

Example: setValue

<App>
  <HStack>
    <Button
      label="Set Time to 14:30"
      onClick="picker.setValue('14:30')" />
    <Button
      label="Remove Time"
      onClick="picker.setValue('')" />
  </HStack>
  <TimeInput id="picker" />
</App>

`value`

You can query the component's value. If no value is set, it will retrieve undefined.

Signature: get value(): any

Parts

The component has some parts that can be styled through layout properties and theme variables separately:

ampm: The AM/PM indicator.
clearButton: The button to clear the time input.
hour: The hour input field.
minute: The minute input field.
second: The second input field.

Styling

Theme Variables

Variable	Default Value (Light)	Default Value (Dark)
backgroundColor-input-TimeInput-invalid	rgba(220, 53, 69, 0.15)	rgba(220, 53, 69, 0.15)
backgroundColor-item-TimeInput--active	none	none
backgroundColor-item-TimeInput--hover	none	none
backgroundColor-menu-TimeInput	none	none
backgroundColor-TimeInput--disabled	none	none
backgroundColor-TimeInput--hover	none	none
backgroundColor-TimeInput-default	none	none
backgroundColor-TimeInput-default--focus	none	none
backgroundColor-TimeInput-default--hover	none	none
backgroundColor-TimeInput-error	none	none
backgroundColor-TimeInput-error--focus	none	none
backgroundColor-TimeInput-error--hover	none	none
backgroundColor-TimeInput-success	none	none
backgroundColor-TimeInput-success--focus	none	none
backgroundColor-TimeInput-success--hover	none	none
backgroundColor-TimeInput-warning	none	none
backgroundColor-TimeInput-warning--focus	none	none
backgroundColor-TimeInput-warning--hover	none	none
borderColor-menu-TimeInput	none	none
borderColor-TimeInput--disabled	none	none
borderColor-TimeInput-default	none	none
borderColor-TimeInput-default--focus	none	none
borderColor-TimeInput-default--hover	none	none
borderColor-TimeInput-error	none	none
borderColor-TimeInput-error--focus	none	none
borderColor-TimeInput-error--hover	none	none
borderColor-TimeInput-success	none	none
borderColor-TimeInput-success--focus	none	none
borderColor-TimeInput-success--hover	none	none
borderColor-TimeInput-warning	none	none
borderColor-TimeInput-warning--focus	none	none
borderColor-TimeInput-warning--hover	none	none
borderRadius-button-TimeInput	$borderRadius	$borderRadius
borderRadius-input-TimeInput	$borderRadius	$borderRadius
borderRadius-menu-TimeInput	none	none
borderRadius-TimeInput-default	none	none
borderRadius-TimeInput-error	none	none
borderRadius-TimeInput-success	none	none
borderRadius-TimeInput-warning	none	none
borderStyle-TimeInput-default	none	none
borderStyle-TimeInput-error	none	none
borderStyle-TimeInput-success	none	none
borderStyle-TimeInput-warning	none	none
borderWidth-TimeInput-default	none	none
borderWidth-TimeInput-error	none	none
borderWidth-TimeInput-success	none	none
borderWidth-TimeInput-warning	none	none
boxShadow-menu-TimeInput	none	none
boxShadow-TimeInput-default	none	none
boxShadow-TimeInput-default--focus	none	none
boxShadow-TimeInput-default--hover	none	none
boxShadow-TimeInput-error	none	none
boxShadow-TimeInput-error--focus	none	none
boxShadow-TimeInput-error--hover	none	none
boxShadow-TimeInput-success	none	none
boxShadow-TimeInput-success--focus	none	none
boxShadow-TimeInput-success--hover	none	none
boxShadow-TimeInput-warning	none	none
boxShadow-TimeInput-warning--focus	none	none
boxShadow-TimeInput-warning--hover	none	none
color-adornment-TimeInput-default	none	none
color-adornment-TimeInput-error	none	none
color-adornment-TimeInput-success	none	none
color-adornment-TimeInput-warning	none	none
color-divider-TimeInput	$textColor-secondary	$textColor-secondary
disabledColor-button-TimeInput	$textColor-disabled	$textColor-disabled
fontSize-ampm-TimeInput	inherit	inherit
fontSize-input-TimeInput	inherit	inherit
gap-adornment-TimeInput	none	none
hoverColor-button-TimeInput	$color-surface-800	$color-surface-800
margin-icon-TimeInput	none	none
margin-input-TimeInput	none	none
maxHeight-menu-TimeInput	none	none
minWidth-ampm-TimeInput	2em	2em
minWidth-input-TimeInput	0.54em	0.54em
opacity-item-TimeInput--disabled	none	none
opacity-TimeInput--disabled	none	none
outlineColor-ampm-TimeInput--focused	none	none
outlineColor-button-TimeInput--focused	$color-accent-500	$color-accent-500
outlineColor-TimeInput-default--focus	none	none
outlineColor-TimeInput-error--focus	none	none
outlineColor-TimeInput-success--focus	none	none
outlineColor-TimeInput-warning--focus	none	none
outlineOffset-ampm-TimeInput--focused	none	none
outlineOffset-button-TimeInput--focused	2px	2px
outlineOffset-TimeInput-default--focus	none	none
outlineOffset-TimeInput-error--focus	none	none
outlineOffset-TimeInput-success--focus	none	none
outlineOffset-TimeInput-warning--focus	none	none
outlineStyle-TimeInput-default--focus	none	none
outlineStyle-TimeInput-error--focus	none	none
outlineStyle-TimeInput-success--focus	none	none
outlineStyle-TimeInput-warning--focus	none	none
outlineWidth-ampm-TimeInput--focused	none	none
outlineWidth-button-TimeInput--focused	2px	2px
outlineWidth-TimeInput-default--focus	none	none
outlineWidth-TimeInput-error--focus	none	none
outlineWidth-TimeInput-success--focus	none	none
outlineWidth-TimeInput-warning--focus	none	none
padding-button-TimeInput	4px 6px	4px 6px
padding-input-TimeInput	0 2px	0 2px
padding-item-TimeInput	none	none
padding-TimeInput-default	none	none
padding-TimeInput-error	none	none
padding-TimeInput-success	none	none
padding-TimeInput-warning	none	none
spacing-divider-TimeInput	1px 0	1px 0
textAlign-input-TimeInput	center	center
textColor-TimeInput--disabled	none	none
textColor-TimeInput-default	none	none
textColor-TimeInput-default--focus	none	none
textColor-TimeInput-default--hover	none	none
textColor-TimeInput-error	none	none
textColor-TimeInput-error--focus	none	none
textColor-TimeInput-error--hover	none	none
textColor-TimeInput-success	none	none
textColor-TimeInput-success--focus	none	none
textColor-TimeInput-success--hover	none	none
textColor-TimeInput-warning	none	none
textColor-TimeInput-warning--focus	none	none
textColor-TimeInput-warning--hover	none	none
transition-background-TimeInput	none	none
width-input-TimeInput	1.8em	1.8em

TimeInput

Properties

autoFocus (default: false)

clearable (default: false)

clearIcon

clearToInitialValue (default: true)

emptyCharacter (default: "-")

enabled (default: true)

endIcon

endText

gap

hour24 (default: true)

initialValue

label

labelBreak (default: true)

labelPosition (default: "top")

labelWidth

maxTime

minTime

mute (default: false)

readOnly (default: false)

required (default: false)

seconds (default: false)

startIcon

startText

validationStatus (default: "none")