新着
時刻ピッカーInterval 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 個のフレームワーク初級
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 | 型 | デフォルト | 説明 |
|---|---|---|---|
value必須 | string | - | 指標の現在値。フォーマット済みの文字列を渡します。 |
onChange必須 | (value: string) => void | - | On change |
label | string | 'Time' | 読み込み中に読み上げられるアクセシブルなラベル。 |
className | string | - | ルート要素にマージされる追加クラス。 |
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.