New
Time PickersInterval Dropdown Time Picker
A native select of times generated on a fixed interval, so the value always lands on the grid.
#time-picker#dropdown#select
3 frameworksBeginner
Loading…
A radiogroup of tappable time-slot buttons that wraps from one column at 320px upward.
<fieldset class="w-full">
<legend class="mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Available times</legend>
<!-- auto-fill + minmax lets the grid wrap from one column at 320px up to many, with no breakpoints. -->
<div role="radiogroup" class="grid grid-cols-[repeat(auto-fill,minmax(4.5rem,1fr))] gap-2">
<button type="button" role="radio" aria-checked="false" class="rounded-lg border border-gray-300 bg-white px-2 py-2 text-sm font-medium tabular-nums text-gray-700 hover:border-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus-visible:ring-blue-400">9:00 AM</button>
<button type="button" role="radio" aria-checked="true" class="rounded-lg border border-blue-600 bg-blue-600 px-2 py-2 text-sm font-medium tabular-nums text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 dark:focus-visible:ring-blue-400">10:00 AM</button>
<button type="button" role="radio" aria-checked="false" class="rounded-lg border border-gray-300 bg-white px-2 py-2 text-sm font-medium tabular-nums text-gray-700 hover:border-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus-visible:ring-blue-400">11:00 AM</button>
</div>
</fieldset>| Prop | Type | Default | Description |
|---|---|---|---|
slotsrequired | string[] | - | Slots |
valuerequired | string | - | The metric's current value, pre-formatted. |
onChangerequired | (value: string) => void | - | On change |
label | string | 'Available times' | Accessible label announced while loading. |
className | string | - | Additional classes merged onto the root element. |
Pass the bookable `slots` as 24-hour strings; the grid uses `auto-fill` with a `minmax(4.5rem,1fr)` track so it reflows across every width without breakpoints. Buttons carry `role="radio"` with `aria-checked` and a visible focus ring.