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 time select paired with an IANA timezone select for unambiguous cross-zone scheduling.
<div class="w-full max-w-md">
<div class="flex flex-col gap-3 sm:flex-row">
<div class="sm:w-40">
<label for="tz-time" class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Time</label>
<select id="tz-time" class="w-full 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 value="09:30" selected>9:30 AM</option>
</select>
</div>
<div class="flex-1">
<label for="tz-zone" class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Time zone</label>
<select id="tz-zone" class="w-full 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 value="America/New_York" selected>Eastern (ET)</option>
</select>
</div>
</div>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
timerequired | string | - | Time |
zonerequired | string | - | Zone |
onChangerequired | (value: { time: string; zone: string }) => void | - | On change |
zones | { value: string; label: string }[] | - | Zones |
intervalMinutes | number | 30 | Interval minutes |
className | string | - | Additional classes merged onto the root element. |
The `time` and `zone` are reported together so a scheduled moment is never ambiguous; the zone list is overridable via the `zones` prop and ships with a sensible default set. The two fields sit inline above `sm` and stack below it.