TimePicker

A time selector with a popup spinner. Each segment (hours, minutes, optionally seconds) can be adjusted via the chevron buttons, arrow keys, or direct input. Styled consistently with DatePicker and Select. Desktop edits are confirmed with OK; coarse-pointer devices use a native time input. The popup requires a Root ancestor.

Basic Usage

Bind value to a string | null. The value format is "HH:MM". Use clearable to allow clearing the selection.

Select time

Selected: —

With Seconds

Add seconds to show a third segment. The value format becomes "HH:MM:SS".

09:30:00

Selected: 09:30:00

Sizes & Disabled

Three sizes: normal (default), compact, and small. Use disabled to prevent interaction.

Normal

Compact

Small

00:12

Rounding

Use round to restrict desktop minute choices. 0 allows minute 00, an interval creates minute choices, and a nonempty array supplies specific minutes — e.g. round={[0, 15, 30, 45]}.

Select time

hour — —

Select time

15 min — —

Select time

30 min — —

Select time

list — —

Inline and custom-trigger APIs

Use TimePickerBody for inline editing or TimePopover for custom triggers and confirmation callbacks. Their value props are not bindable.