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 clock face whose twelve hour marks are real buttons, with an SVG hand pointing at the selection.
<div class="w-full max-w-[16rem]">
<p class="mb-3 text-center text-sm font-medium text-gray-700 dark:text-gray-300">Select hour</p>
<div class="relative mx-auto aspect-square w-full rounded-full border border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-900">
<!-- The hand is a pure SVG overlay, decorative; the 12 hour marks are the real focusable controls. -->
<svg viewBox="0 0 100 100" class="pointer-events-none absolute inset-0 h-full w-full" aria-hidden="true">
<line x1="50" y1="50" x2="50" y2="18" class="stroke-blue-600 dark:stroke-blue-400" stroke-width="2" stroke-linecap="round" />
<circle cx="50" cy="50" r="2.5" class="fill-blue-600 dark:fill-blue-400" />
</svg>
<button type="button" aria-pressed="true" aria-label="10 o'clock" style="left:30%;top:16.7%" class="absolute flex h-9 w-9 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-blue-600 text-sm font-semibold 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</button>
<!-- ...remaining marks 1-12 positioned the same way... -->
</div>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
valuerequired | string | - | The metric's current value, pre-formatted. |
onChangerequired | (value: string) => void | - | On change |
label | string | 'Select hour' | Accessible label announced while loading. |
className | string | - | Additional classes merged onto the root element. |
The marks are positioned with trigonometry around a percentage-based circle so the dial scales fluidly, and the hand is a decorative SVG overlay that follows the selected hour. AM/PM is preserved from the incoming value, and every mark is keyboard-focusable with a visible ring.