Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA grid of bookable times for one day, generated from a range and step or passed in, with taken slots, morning and afternoon groups and a time zone note.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it after a person has picked a day, to choose a start time from the times that are really open: appointments, interviews, deliveries. Pass unavailable from your availability data.
To type any time use time-field.
| Prop | Type | Default | Description |
|---|---|---|---|
| slots | string[] | - | Start times HH:mm. Overrides from, to and step. |
| from / to / step | string / string / number | 09:00 / 17:00 / 30 | Generate a slot every step minutes, to excluded. |
| value / defaultValue | string | null | null | Chosen slot. |
| onValueChange | (value: string | null) => void | - | Called with the chosen slot. |
| unavailable | string[] | (slot) => boolean | - | Taken slots. |
| columns | 2 | 3 | 4 | 3 | Slots per row. |
| groupByPeriod | boolean | false | Morning, afternoon and evening groups. |
| timeZoneLabel / hourCycle / locale | - | - | Note under the slots, clock, locale. |
| emptyText / label / disabled | - | - | Empty message, accessible name, disabled state. |
| Keys | Action |
|---|---|
| Arrow keys | Move between available slots and select (Down and Up move by a row) |
| Home / End | First and last available slot |
| Tab | One tab stop: the chosen slot or the first available one |
radiogroup of radio buttons with a roving tab stop; taken slots are disabled and skipped by the arrow keys.aria-hidden) because the times already say morning or afternoon through AM and PM.role="status" message says so.9:00 AM or 09:00).