TimePicker

Open in Playground

Themed hour and minute columns (no native control). Values are 24-hour "HH:MM" strings; step is the minute granularity in seconds, min / max disable times outside a range, and hour12 shows an AM / PM clock. Arrow keys move within a column and between columns.

Banana time

Banana break (9-5, 12-hour)

Props

labelstring
Label text.
valuestring
Time as 24-hour "HH:MM".
onChange(value: string) => void
Called with the new "HH:MM".
stepnumber
Default: 900
Minute granularity in seconds (900 = every 15 minutes).
minstring
Earliest time ("HH:MM").
maxstring
Latest time ("HH:MM").
hour12boolean
Default: false
Show a 12-hour clock with AM / PM (the value stays 24-hour).
placeholderstring
Default: 'Select time'
Text when no time is chosen.
errorstring
Error message shown below the control; sets the invalid style.
disabledboolean
Default: false
Disable the control.
classNamestring
Default: ''
Extra classes for the root element.
...rest
Any other props are passed to the underlying element.

TimePicker props
Prop	Type	Default	Description
`label`	string	–	Label text.
`value`	string	–	Time as 24-hour "HH:MM".
`onChange`	(value: string) => void	–	Called with the new "HH:MM".
`step`	number	`900`	Minute granularity in seconds (900 = every 15 minutes).
`min`	string	–	Earliest time ("HH:MM").
`max`	string	–	Latest time ("HH:MM").
`hour12`	boolean	`false`	Show a 12-hour clock with AM / PM (the value stays 24-hour).
`placeholder`	string	`'Select time'`	Text when no time is chosen.
`error`	string	–	Error message shown below the control; sets the invalid style.
`disabled`	boolean	`false`	Disable the control.
`className`	string	`''`	Extra classes for the root element.
`...rest`		–	Any other props are passed to the underlying element.

Related hooks and theme:useDismissable