新着
時刻ピッカーStepper Time Input
Hours and minutes as ARIA spinbuttons with plus/minus controls and arrow-key support.
#time-picker#stepper#spinbutton
3 個のフレームワーク中級
Loading…
A native select of times generated on a fixed interval, so the value always lands on the grid.
<div class="w-full max-w-xs">
<label for="time-dropdown" class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Time</label>
<div class="relative">
<!-- A native <select> is fully keyboard-operable for free; only the arrow is custom, so it is aria-hidden and pointer-events-none. -->
<select id="time-dropdown" class="w-full appearance-none rounded-lg border border-gray-300 bg-white py-2.5 pl-3 pr-9 text-sm text-gray-900 shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">
<option value="09:00">9:00 AM</option>
<option value="09:30" selected>9:30 AM</option>
<option value="10:00">10:00 AM</option>
<option value="10:30">10:30 AM</option>
</select>
<svg class="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500 dark:text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
</svg>
</div>
</div>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
value必須 | string | - | 指標の現在値。フォーマット済みの文字列を渡します。 |
onChange必須 | (value: string) => void | - | On change |
intervalMinutes | number | 30 | Interval minutes |
label | string | 'Time' | 読み込み中に読み上げられるアクセシブルなラベル。 |
id | string | 'time-dropdown' | Id |
className | string | - | ルート要素にマージされる追加クラス。 |
Set `intervalMinutes` (clamped 5-60) to change the granularity; a native `<select>` is used because it is keyboard-operable and screen-reader-friendly for free, with only the chevron drawn as an `aria-hidden` overlay.