TimePicker
Drum-roll time selector without a date. Supports three precision levels: hour, hour+minute, or hour+minute+second. Selection is confirmed with an OK button.
Playground
label
placeholder
timeMode
size
clearable
showIcon
disabled
rounded
<TimePicker
placeholder="Select time"
/>Time modes
Use timeMode to control which time units are shown. "HH" shows only hours, "HH:mm" adds minutes (default), "HH:mm:ss" adds seconds.
HH
HH:mm
HH:mm:ss
Basic
Uncontrolled usage. Scroll the drum-roll columns to set the time, then click OK to confirm.
Clearable
Adds a clear button when a value is selected.
Controlled
Drive the value from external state. The onChange callback fires only when OK is clicked.
No value selected
With label and hint
Meeting timeSelect the start time of your meeting
Error state
Start timePlease select a time
Sizes
Disabled
Locale: Tiếng Việt
Pass locale="vi" to switch panel labels to Vietnamese.
Locale: Custom object
Pass a full TimePickerLocale object for any language not built-in.
Custom icon
Pass any ReactNode via the icon prop to replace the default clock icon.
API
| Property | Type | Default | Description |
|---|---|---|---|
value | string | null | Controlled value. Format matches timeMode: "14", "14:30", or "14:30:00" | |
defaultValue | string | null | Initial value for uncontrolled usage | |
onChange | (time: string | null) => void | Called when OK is confirmed. Receives null when cleared | |
timeMode | "HH" | "HH:mm" | "HH:mm:ss" | "HH:mm" | Which time units to show: hour only, hour+minute, or hour+minute+second |
placeholder | string | "Select time" | Placeholder shown when no value is selected |
disabled | boolean | false | Disable the picker |
clearable | boolean | false | Show a clear button when a value is selected |
size | "sm" | "md" | "lg" | "md" | Size preset |
label | string | Label rendered above the trigger | |
required | boolean | false | Mark label as required |
error | string | Error message shown below the picker | |
hint | string | Hint text shown below the picker | |
showIcon | boolean | true | Show or hide the clock icon |
icon | ReactNode | Replace the default icon with a custom element | |
locale | string | TimePickerLocale | auto | Language for panel labels. Pass a BCP-47 tag ("vi", "en") or a custom locale object. Auto-detects from <html lang="…"> when omitted. |
rounded | "none" | "sm" | "md" | "lg" | "full" | Border-radius preset | |
className | string | Additional class on the root element |
