TimePicker
Time input with 12-hour and 24-hour formatting.
Quick Preview
Usage
<TimePicker value={time} onChange={setTime} />Examples
Default TimePicker
Use this as the starting point for TimePicker. Values are committed on Apply, so scrolling the wheel never emits intermediate changes. Keep product data, routing, fetching, and authorization logic in the consuming app.
24-hour format
Set format="24h" to drop the AM/PM column and emit HH:mm values.
Trigger sizes
Use size to match surrounding form controls. It changes only the trigger; the time selection panel keeps its standard dimensions.
<TimePicker size="sm" />
<TimePicker size="md" />
<TimePicker size="lg" />
<TimePicker size="xl" />Props
| Prop/API | Type | Default | Description |
|---|---|---|---|
value | string | - | Controlled time value (hh:mm AM/PM in 12h, HH:mm in 24h). |
onChange | (time) => void | - | Called with the applied time string. |
format | `"12h" | "24h"` | "12h" |
disabled | boolean | false | Disables the trigger. |
size | `"sm" | "md" | "lg" |
placeholder | string | "Select time" | Trigger placeholder copy. |
side / align | base-ui positioner props | "bottom" / "center" | Preferred placement for the panel. Preferences only — the panel moves to whichever side it fits on, the perpendicular ones included. |
sideOffset / alignOffset | number | 6 / 0 | Distance from the trigger. |
collisionAvoidance | base-ui CollisionAvoidance | popover default | How the panel reacts to running out of room. Pass { side: "none" } to hold the preferred side even when it overflows. |
className | string | - | Local layout or spacing overrides. |
| native/root props | React component props | - | Passed through to the underlying root or primitive. |
Accessibility
- Provide visible labels or accessible names for interactive controls.
- Each wheel is a labelled listbox (Hour, Minute, Period); options are focusable buttons that can be activated with the keyboard.
- Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
- Do not communicate state with color alone; include text, icons, or helper copy.