TimeInput

Time picker input field with optional seconds granularity.

Examples

Default

Start time

<TimeInput {...args} onChange={setValue} value={value} />

With Seconds

Start time

<TimeInput {...args} onChange={setValue} value={value} />

With Clear

Start time

Clear Start time

<TimeInput {...args} onChange={setValue} value={value} />

With Constraints

Start time

<TimeInput {...args} onChange={setValue} value={value} />

Disabled

Start time

<TimeInput {...args} onChange={() => {}} value={TIME_0900} />

Loading

Start time

<TimeInput {...args} onChange={() => {}} value={TIME_0900} />

Error Status

Start time

Time is required

<TimeInput {...args} onChange={setValue} value={value} />

Warning Status

Start time

Outside business hours

<TimeInput {...args} onChange={setValue} value={value} />

Success Status

Start time

Time slot available

<TimeInput {...args} onChange={setValue} value={value} />

Sizes

Small

Medium

Large

<div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
  <TimeInput label="Small" onChange={setSm} size="sm" value={sm} />
  <TimeInput label="Medium" onChange={setMd} size="md" value={md} />
  <TimeInput label="Large" onChange={setLg} size="lg" value={lg} />
</div>

Required

Start time · Required

<TimeInput {...args} onChange={setValue} value={value} />

Optional

Start time · Optional

<TimeInput {...args} onChange={setValue} value={value} />

With Description

Start timeSelect a time in your local timezone.

<TimeInput {...args} onChange={setValue} value={value} />

Hidden Label

Start time

<TimeInput {...args} onChange={setValue} value={value} />

With Label Tooltip

Start time

Times are shown in your local timezone.

<TimeInput {...args} onChange={setValue} value={value} />

API

TimeInput

Time picker input field with optional seconds granularity.

When isOptional: false, isRequired: false

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the input wrapper.
data-testid	string	—	Test ID applied to the input element.
description	ReactNode	—	Supporting text displayed below the label.
hasAutoFocus	boolean	false	Whether to focus the input on mount.
hasClear	boolean	false	Whether to show a clear button when a value is set.
hasSeconds	boolean	false	Whether the input includes a seconds field.
htmlName	string	—	HTML name attribute.
isDisabled	boolean	false	Whether the input is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
isLoading	boolean	false	Whether the input is loading.
label*	string	—	Field label.
labelIcon	IconComponent	—	Icon shown before the label.
labelTooltip	ReactNode	—	Tooltip content shown next to the label.
max	PlainTime	—	Latest allowed time.
min	PlainTime	—	Earliest allowed time.
onBlur	(event: FocusEvent<HTMLInputElement>) => void	—	Called when the input loses focus.
onChange*	(value: PlainTime | null) => void	—	Called when the time value changes.
onFocus	(event: FocusEvent<HTMLInputElement>) => void	—	Called when the input gains focus.
placeholder	string	'Select a time'	Placeholder text.
ref	Ref<HTMLInputElement>	—	Ref forwarded to the input element.
size	"sm" | "md" | "lg"	'md'	Visual size.
status	InputStatus	—	Validation status displayed below the input.
step	number	—	Step increment in seconds for the time picker.
style	CSSProperties	—	Inline styles applied to the input wrapper.
value*	PlainTime | null	—	Controlled time value. Pass null for an empty input.
isOptional	false	—
isRequired	false	—

When isOptional: true, isRequired: false

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the input wrapper.
data-testid	string	—	Test ID applied to the input element.
description	ReactNode	—	Supporting text displayed below the label.
hasAutoFocus	boolean	false	Whether to focus the input on mount.
hasClear	boolean	false	Whether to show a clear button when a value is set.
hasSeconds	boolean	false	Whether the input includes a seconds field.
htmlName	string	—	HTML name attribute.
isDisabled	boolean	false	Whether the input is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
isLoading	boolean	false	Whether the input is loading.
label*	string	—	Field label.
labelIcon	IconComponent	—	Icon shown before the label.
labelTooltip	ReactNode	—	Tooltip content shown next to the label.
max	PlainTime	—	Latest allowed time.
min	PlainTime	—	Earliest allowed time.
onBlur	(event: FocusEvent<HTMLInputElement>) => void	—	Called when the input loses focus.
onChange*	(value: PlainTime | null) => void	—	Called when the time value changes.
onFocus	(event: FocusEvent<HTMLInputElement>) => void	—	Called when the input gains focus.
placeholder	string	'Select a time'	Placeholder text.
ref	Ref<HTMLInputElement>	—	Ref forwarded to the input element.
size	"sm" | "md" | "lg"	'md'	Visual size.
status	InputStatus	—	Validation status displayed below the input.
step	number	—	Step increment in seconds for the time picker.
style	CSSProperties	—	Inline styles applied to the input wrapper.
value*	PlainTime | null	—	Controlled time value. Pass null for an empty input.
isOptional*	true	—
isRequired	false	—

When isOptional: false, isRequired: true

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the input wrapper.
data-testid	string	—	Test ID applied to the input element.
description	ReactNode	—	Supporting text displayed below the label.
hasAutoFocus	boolean	false	Whether to focus the input on mount.
hasClear	boolean	false	Whether to show a clear button when a value is set.
hasSeconds	boolean	false	Whether the input includes a seconds field.
htmlName	string	—	HTML name attribute.
isDisabled	boolean	false	Whether the input is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
isLoading	boolean	false	Whether the input is loading.
label*	string	—	Field label.
labelIcon	IconComponent	—	Icon shown before the label.
labelTooltip	ReactNode	—	Tooltip content shown next to the label.
max	PlainTime	—	Latest allowed time.
min	PlainTime	—	Earliest allowed time.
onBlur	(event: FocusEvent<HTMLInputElement>) => void	—	Called when the input loses focus.
onChange*	(value: PlainTime | null) => void	—	Called when the time value changes.
onFocus	(event: FocusEvent<HTMLInputElement>) => void	—	Called when the input gains focus.
placeholder	string	'Select a time'	Placeholder text.
ref	Ref<HTMLInputElement>	—	Ref forwarded to the input element.
size	"sm" | "md" | "lg"	'md'	Visual size.
status	InputStatus	—	Validation status displayed below the input.
step	number	—	Step increment in seconds for the time picker.
style	CSSProperties	—	Inline styles applied to the input wrapper.
value*	PlainTime | null	—	Controlled time value. Pass null for an empty input.
isOptional	false	—
isRequired*	true	—