Time Field

Forms

A native time input styled to match the design system.

A styled wrapper around the native time input. The clock icon marks the field, and the value is reported as a 24-hour HH:MM string.

npx shadcn@latest add time-field

Basic usage

Pick a time with the platform picker; the value is a HH:MM string.

Preview

Live

Time: none

tsx

1const [value, setValue] = useState("")
2
3<TimeField
4  value={value}
5  onChange={(event) => setValue(event.target.value)}
6/>

The step prop controls the minute granularity of the picker.

Preview

Live

tsx

1<TimeField step={900} />

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
value	string	The controlled time in HH:MM format.
onChange	ChangeEventHandler<HTMLInputElement>	Called when the time changes.
step	number	The minute granularity of the picker.
disabled	boolean= false	Disables the input.
className	string	Additional classes merged into the wrapper.