TimeSlotPicker

A grid of time slots where exactly one can be chosen, such as appointment times beside a Calendar (Base UI RadioGroup). Each slot is a radio, so arrow keys move the selection and name submits the chosen value with a form. Slots reflow into as many equal columns as fit; the picker sets no outer padding.

Usage

import { TimeSlot, TimeSlotPicker, TimeSlotPickerProps } from "@instruments/materia-ui/components/time-slot-picker";

Best practices

Pass slot values already formatted for display, or give each slot a label - the picker does no time parsing or 12/24-hour formatting.
Name the group with aria-label or aria-labelledby; screen readers announce it before the first slot.
Use TimeSlotPicker for a fixed set of offered times; for any time the user types, use Input type="time".

Props

Prop	Type	Description
slots(required)	`readonly TimeSlot[]`	The times on offer, in display order.
value	`string \| null`	Controlled selection; `null` means nothing is chosen.
defaultValue	`string \| null`	Uncontrolled initial selection.
onValueChange	`(value: string) => void`	Called with the chosen slot's `value`.
disabled	`boolean`	Disables every slot.
name	`string`	Form field name for the chosen value.
aria-label	`string`	Accessible name for the group; required unless aria-labelledby is passed.

Also exports

interfaceTimeSlot
interfaceTimeSlotPickerProps