Times entered fast, validated quietly.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / onChange | {h, m} | — | Controlled time, 24-hour internally |
| hour12 | boolean | true | AM/PM columns, or a 24-hour clock |
| step | number | 1 | Minute increment: 1 (every minute, 0–59) · 5 · 15 · 30 |
| initial | {h, m} | 09:00 | Uncontrolled starting time |
| min / max | {h, m} | — | Bounds; out-of-range options disable |
| footer | boolean | true | Readout + Now shortcut |
| Trigger | Result |
|---|---|
| Click an option | Commits that hour, minute or period |
| ↑ ↓ within a column | Move focus through the list |
| Enter / Space | Select the focused option |
| Now | Jumps to the current time, rounded to the step |
Match the step to the task. Booking slots rarely need per-minute precision.
Don't make the user scroll sixty rows when four would do the job.
Show AM/PM explicitly. "9:00" alone is ambiguous; "9:00 AM" never is.
Don't mix a 24-hour number with a period. Pick one clock and hold it.
Collapsed into a field, the picker opens in a popover only when needed.
Standalone, the columns make setting a one-off reminder quick and precise.
Two fields set an interval — office hours, a shift, an availability window.
| Token | Value | Role |
|---|---|---|
| --time-w | 184px | Panel width |
| --time-bg | #0E0F12 | Panel surface |
| --time-border | #1E1F24 | Panel & footer hairline |
| --time-col-h | 176px | Scroll column height |
| --time-opt | 34px · radius 8 | Option row height |
| --time-selected | #FF7A00 | Selected option & period, near-black label |
| --time-readout | 1.4rem mono | Header time display |
| --time-focus | rgba(255,122,0,.55) | 2px keyboard focus ring |
<div class="o-time">
<div class="o-time__head">09:00 AM</div>
<div class="o-time__cols">
<div class="o-time__col" role="listbox">
<button class="o-time__opt is-selected">9</button>
<button class="o-time__opt">10</button>
</div>
<span class="o-time__sep">:</span>
<div class="o-time__col" role="listbox">
<button class="o-time__opt is-selected">00</button>
<button class="o-time__opt">05</button>
</div>
<div class="o-time__period">
<button class="is-selected">AM</button>
<button>PM</button>
</div>
</div>
</div>