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…
Two masked HH and MM fields that clamp input, auto-advance and respond to the arrow keys.
<div class="w-full max-w-xs">
<span class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300" id="typed-label">Time</span>
<div class="flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-3 py-2 focus-within:ring-2 focus-within:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:focus-within:ring-blue-400" role="group" aria-labelledby="typed-label">
<input inputmode="numeric" aria-label="Hours" value="09" maxlength="2" class="w-10 bg-transparent text-center text-lg font-semibold tabular-nums text-gray-900 focus:outline-none dark:text-gray-100" />
<span aria-hidden="true" class="text-lg font-semibold text-gray-400">:</span>
<input inputmode="numeric" aria-label="Minutes" value="05" maxlength="2" class="w-10 bg-transparent text-center text-lg font-semibold tabular-nums text-gray-900 focus:outline-none dark:text-gray-100" />
<div class="ml-auto inline-flex overflow-hidden rounded-md border border-gray-300 dark:border-gray-700">
<button type="button" aria-pressed="true" class="bg-blue-600 px-2 py-1 text-xs font-semibold text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-600 dark:focus-visible:ring-blue-400">AM</button>
<button type="button" aria-pressed="false" class="px-2 py-1 text-xs font-semibold text-gray-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset 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 |
label | string | 'Time' | Accessible label announced while loading. |
className | string | - | Additional classes merged onto the root element. |
Typing is filtered to digits and clamped to valid ranges; a full two-digit hour auto-advances focus to the minutes field, and Arrow Up/Down nudge each segment. The container shows a single `focus-within` ring so the pair reads as one control.