components / slot-picker
slot-picker.
column or grid of bookable times with a two-step confirm: picking a slot splits the row so the confirm button lands under the cursor that just chose the time, making the commit deliberate and a mis-tap free. one tab stop with arrow-key movement, because a day can hold thirty slots.
wednesday, august 5
times shown in america/los_angeles
installation
bunx @justin06lee/chrome@latest add slot-pickerprops
| name | type | default | description |
|---|---|---|---|
| slots * | Slot[] | - | { value, label, disabled?, note? }. value is stable identity — iso string or epoch ms. |
| value * | string | null | - | selected slot value. |
| onChange * | (value: string | null) => void | - | fires on pick; clicking the selected slot again deselects. |
| onConfirm | (value: string) => void | - | commits the selection. when set, the selected row splits and reveals the confirm half in place. omit for a plain single-select grid. |
| confirmLabel | ReactNode | 'confirm' | |
| columns | number | 'auto' | 1 | 'auto' fills the container at ~7rem per column. |
| label | ReactNode | - | mono uppercase caption above the grid. |
| footnote | ReactNode | - | muted line under the grid — usually the zone the labels are in. |
| emptyState | ReactNode | - | shown in place of the grid when slots is empty. |
| disabled | boolean | false | disables every slot without emptying the grid. |
| confirming | boolean | false | pending state for the confirm half. |
| ariaLabel | string | 'available times' | |
| className | string | - |