TimeInput

Editable time field with a clock-triggered column picker and optional seconds. Picker selections apply immediately; Done just closes the picker.

Examples

Default

Start time

(args: TimeInputProps) => {
  const [value, setValue] = useState<PlainTime | null>(TIME_0900);
  return <TimeInput {...args} onChange={setValue} value={value} />;
}

With Seconds

Start time

(args: TimeInputProps) => {
  const [value, setValue] = useState<PlainTime | null>(TIME_090030);
  return <TimeInput {...args} onChange={setValue} value={value} />;
}

With Clear

Start time

Clear Start time

(args: TimeInputProps) => {
  const [value, setValue] = useState<PlainTime | null>(TIME_1430);
  return <TimeInput {...args} onChange={setValue} value={value} />;
}

With Constraints

Start time

(args: TimeInputProps) => {
  const [value, setValue] = useState<PlainTime | null>(TIME_1200);
  return <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

(args: TimeInputProps) => {
  const [value, setValue] = useState<PlainTime | null>(null);
  return <TimeInput {...args} onChange={setValue} value={value} />;
}

Warning Status

Start time

Outside business hours

(args: TimeInputProps) => {
  const [value, setValue] = useState<PlainTime | null>(TIME_2200);
  return <TimeInput {...args} onChange={setValue} value={value} />;
}

Success Status

Start time

Time slot available

(args: TimeInputProps) => {
  const [value, setValue] = useState<PlainTime | null>(TIME_1000);
  return <TimeInput {...args} onChange={setValue} value={value} />;
}

Sizes

Small

Medium

Large

() => {
  const [sm, setSm] = useState<PlainTime | null>(TIME_0900);
  const [md, setMd] = useState<PlainTime | null>(TIME_0900);
  const [lg, setLg] = useState<PlainTime | null>(TIME_0900);
  return (
    <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

(args: TimeInputProps) => {
  const [value, setValue] = useState<PlainTime | null>(TIME_0900);
  return <TimeInput {...args} onChange={setValue} value={value} />;
}

Optional

Start time · Optional

(args: TimeInputProps) => {
  const [value, setValue] = useState<PlainTime | null>(TIME_0900);
  return <TimeInput {...args} onChange={setValue} value={value} />;
}

With Description

Start timeSelect a time in your local timezone.

(args: TimeInputProps) => {
  const [value, setValue] = useState<PlainTime | null>(TIME_0900);
  return <TimeInput {...args} onChange={setValue} value={value} />;
}

Hidden Label

Start time

(args: TimeInputProps) => {
  const [value, setValue] = useState<PlainTime | null>(TIME_0900);
  return <TimeInput {...args} onChange={setValue} value={value} />;
}

With Label Tooltip

Start time

Times are shown in your local timezone.

(args: TimeInputProps) => {
  const [value, setValue] = useState<PlainTime | null>(TIME_0900);
  return <TimeInput {...args} onChange={setValue} value={value} />;
}

Read Only

Start time

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

Quarter Hour Picker

Start timeClick the clock to pick a time. Selections apply immediately.

(args: TimeInputProps) => {
  const [value, setValue] = useState<PlainTime | null>(TIME_0900);
  return <TimeInput {...args} onChange={setValue} value={value} />;
}

Overnight

Start timeAvailable from 10 PM to 2 AM.

(args: TimeInputProps) => {
  const [value, setValue] = useState<PlainTime | null>(TIME_2200);
  return <TimeInput {...args} onChange={setValue} value={value} />;
}

Empty

Start time

(args: TimeInputProps) => {
  const [value, setValue] = useState<PlainTime | null>(null);
  return <TimeInput {...args} hasClear onChange={setValue} value={value} />;
}

API

TimeInput

Editable time field with a clock-triggered column picker and optional seconds. Picker selections apply immediately; Done just closes the picker.

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.
isReadOnly	boolean	false	Whether the value is displayed without allowing focus or interaction.
label*	string	—	Field label.
labelEnd	ReactNode	—	Content shown at the end of the label row, such as a link. It renders outside the label, so it does not focus the control or change its accessible name. It stays visible when isLabelHidden is true.
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.
isReadOnly	boolean	false	Whether the value is displayed without allowing focus or interaction.
label*	string	—	Field label.
labelEnd	ReactNode	—	Content shown at the end of the label row, such as a link. It renders outside the label, so it does not focus the control or change its accessible name. It stays visible when isLabelHidden is true.
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.
isReadOnly	boolean	false	Whether the value is displayed without allowing focus or interaction.
label*	string	—	Field label.
labelEnd	ReactNode	—	Content shown at the end of the label row, such as a link. It renders outside the label, so it does not focus the control or change its accessible name. It stays visible when isLabelHidden is true.
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	—