Time Picker

Playground

Installation

pnpm add @tessinaui/ui

Usage

import { TimePicker } from "@tessinaui/ui";

{/* Inline wheel (default) */}
<TimePicker defaultValue="10:30" />

{/* Typed input field */}
<TimePicker variant="input" defaultValue="10:30" />

{/* Button trigger + popover wheel */}
<TimePicker variant="popover" defaultValue="10:30" />

{/* 24-hour format */}
<TimePicker format="24h" defaultValue="14:00" />

{/* With seconds */}
<TimePicker showSeconds defaultValue="10:30:00" />

{/* 15-minute step (wheel & popover only) */}
<TimePicker step={15} defaultValue="10:30" />

{/* Controlled */}
<TimePicker value={time} onChange={setTime} />

Showcase

Variants

API Reference

Notes

• Value format — Values are always stored and emitted in 24h "HH:mm" (or "HH:mm:ss" when showSeconds is true). The format prop only controls the display columns; you never need to parse AM/PM from the emitted value.
• Controlled vs uncontrolled — Pass value + onChange for controlled, or defaultValue alone for uncontrolled. Once value is defined the component is fully controlled.
• Step alignment — When step > 1, an incoming value whose minute (or second) doesn't appear in the step list is snapped to the nearest step value automatically.
• Wheel keyboard navigation — Each column is focusable (tabIndex={0}) and responds to ArrowUp / ArrowDown (step ±1), Home (first item), End (last item). Columns announce their role and selection via role="listbox" / role="option" / aria-selected.
• Wheel and drag — Scroll the mouse wheel over a column to cycle values. Click-and-drag vertically to scroll multiple steps at once. Pointer capture ensures drag tracking works even when the pointer leaves the column bounds.
• Typed input — variant="input" renders editable HH / MM (/ SS) segments and an AM/PM toggle for 12h. Each segment accepts up to 2 digits and auto-advances to the next. ArrowUp / ArrowDown step the focused segment by ±1 and wrap at min/max. Enter blurs the segment, committing the typed buffer. The step prop has no effect here — the user can land on any minute or second.
• RTL — dir="rtl" reverses the column order inside the wheel and flips the input/popover layout via the CSS dir attribute on the container.
• Popover trigger — The variant="popover" trigger shows a formatted display value with a Clock icon and a rotating ChevronDown indicator. The popover is positioned below-start and animates in/out via Base UI's data-[starting-style] / data-[ending-style] attributes.
• Selected number visibility — The selection band renders behind the column list so the active number stays readable on every intent (including the solid bg-secondary used by the none intent).