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…
Hour and minute selects with a format switch, while the stored value stays 24-hour throughout.
<div class="w-full max-w-sm">
<div class="mb-2 flex items-center justify-between">
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Time</span>
<div class="inline-flex rounded-lg border border-gray-300 p-0.5 dark:border-gray-700" role="group" aria-label="Time format">
<button type="button" aria-pressed="true" class="rounded-md bg-blue-600 px-2.5 py-1 text-xs font-semibold text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:focus-visible:ring-blue-400">12h</button>
<button type="button" aria-pressed="false" class="rounded-md px-2.5 py-1 text-xs font-semibold text-gray-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-400 dark:focus-visible:ring-blue-400">24h</button>
</div>
</div>
<div class="flex items-center gap-2">
<select aria-label="Hour" class="appearance-none rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-sm text-gray-900 shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-blue-400">
<option>9</option>
</select>
<span class="text-lg font-semibold text-gray-500 dark:text-gray-400">:</span>
<select aria-label="Minute" class="appearance-none rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-sm text-gray-900 shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-blue-400">
<option>30</option>
</select>
<div class="inline-flex rounded-lg border border-gray-300 p-0.5 dark:border-gray-700" role="group" aria-label="AM or PM">
<button type="button" aria-pressed="true" class="rounded-md bg-blue-600 px-2.5 py-1.5 text-xs font-semibold text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:focus-visible:ring-blue-400">AM</button>
<button type="button" aria-pressed="false" class="rounded-md px-2.5 py-1.5 text-xs font-semibold text-gray-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-400 dark:focus-visible:ring-blue-400">PM</button>
</div>
</div>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
valuerequired | string | - | The metric's current value, pre-formatted. |
onChangerequired | (value: string) => void | - | On change |
minuteStep | number | 5 | Minute step |
className | string | - | Additional classes merged onto the root element. |
The `value` is always a 24-hour `HH:MM` string; the 12h/24h toggle and AM/PM pills only change presentation, so consumers never have to guess what the picker meant. In 24-hour mode the AM/PM control disappears and the hour list runs 0-23.