Hour / minute columns
Two scrollable lists. Click or arrow-key to select. aria-selected drives the highlight.
—
Time Picker
Hours and minutes in two scrollable columns, or as a slot grid for booking flows. 12h / 24h, AM/PM, inline HH:MM — one primitive, every shape.
Slot grid · 15-minute increments
Pre-baked appointment slots from 09:00 to 17:00. Some marked disabled.
—
Format toggle
Same value, different read. The toggle re-renders the column display without losing selection.
AM/PM selector
For 12h workflows. Pairs with the column picker; AM/PM is a separate radio group.
Inline numeric input
Two numeric inputs with up/down chevrons. Arrow keys step by 1 minute / 1 hour.
:
Disabled times
Slots before now and a manually-marked “booked” window render dim, struck-through, and non-selectable.
Usage
Single root <div data-tp data-mode="columns|slots" data-format="12|24" data-disable="...">. Emits lsd:time:select with { hour, minute, iso }. Inline mode (.lsd-time-inline) is a separate small primitive that pairs nicely with form layouts.