TimeInput

Time picker input field with optional seconds granularity.

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} />

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.
isReadOnly	boolean	false	Whether the value is displayed without allowing focus or interaction.
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.
isReadOnly	boolean	false	Whether the value is displayed without allowing focus or interaction.
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.
isReadOnly	boolean	false	Whether the value is displayed without allowing focus or interaction.
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	—