Searchable Select
Selects
Source and install need .
pnpm dlx shadcn@latest add @assembli/timezone-selectTime Zone Select
A time zone picker with cities instead of IANA ids. Each row shows its live local time, current GMT offset, a day or night glyph and the weekday when it's already tomorrow there. Your own zone is pinned on top (or preselected with "auto"), and search takes cities, countries, abbreviations like PST or IST, and offsets like +5:30. Matches every other select.
Props
Other props pass through to the root element.
value
string | null
IANA name. Pass with
onValueChangeto control it.defaultValue
string | null
Default
nullIANA name, or
"auto"for the reader's own zone once the page loads.onValueChange
(value: string | null, zone: TimeZoneOption | null) => void
zones
TimeZoneGroup[]
Default
TIME_ZONESYour own list. Defaults to
TIME_ZONES.showDetected
boolean
Default
truePins the reader's zone in a "Your time zone" group at the top. Defaults to
true.hourCycle
"h12" | "h23"
"h12"for 9:42 PM,"h23"for 21:42. Defaults to the locale's habit.locale
string
label
React.ReactNode
hint
React.ReactNode
Quiet text to the right of the label, such as "Optional".
description
React.ReactNode
error
React.ReactNode
Replaces the description and marks the trigger
aria-invalid.placeholder
React.ReactNode
Default
"Select a time zone…"size
SelectSize
Default
"md"disabled
boolean
required
boolean
name
string
Submits the IANA name with a surrounding form.
open
boolean
defaultOpen
boolean
onOpenChange
(open: boolean) => void
triggerClassName
string
Classes for the trigger;
classNamegoes on the root.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | null | – | IANA name. Pass with onValueChange to control it. |
| defaultValue | string | null | null | IANA name, or "auto" for the reader's own zone once the page loads. |
| onValueChange | (value: string | null, zone: TimeZoneOption | null) => void | – | |
| zones | TimeZoneGroup[] | TIME_ZONES | Your own list. Defaults to TIME_ZONES. |
| showDetected | boolean | true | Pins the reader's zone in a "Your time zone" group at the top. Defaults to true. |
| hourCycle | "h12" | "h23" | – | "h12" for 9:42 PM, "h23" for 21:42. Defaults to the locale's habit. |
| locale | string | – | |
| label | React.ReactNode | – | |
| hint | React.ReactNode | – | Quiet text to the right of the label, such as "Optional". |
| description | React.ReactNode | – | |
| error | React.ReactNode | – | Replaces the description and marks the trigger aria-invalid. |
| placeholder | React.ReactNode | "Select a time zone…" | |
| size | SelectSize | "md" | |
| disabled | boolean | – | |
| required | boolean | – | |
| name | string | – | Submits the IANA name with a surrounding form. |
| open | boolean | – | |
| defaultOpen | boolean | – | |
| onOpenChange | (open: boolean) => void | – | |
| triggerClassName | string | – | Classes for the trigger; className goes on the root. |
