components / timezone-select
timezone-select.
searchable iana timezone picker that shows what time it actually is in each zone, sorted by utc offset. combobox covers searchable select in general; this is the case where the label alone can't answer the question — you're choosing "the one where it's 4pm now". clock starts null and fills in after mount so ssr and hydration agree.
your time zone
slots will be shown in America/Los_Angeles
installation
bunx @justin06lee/chrome@latest add timezone-selectprops
| name | type | default | description |
|---|---|---|---|
| value * | string | - | iana zone name, e.g. "America/Los_Angeles". |
| onChange * | (zone: string) => void | - | |
| zones | string[] | - | zones to offer. defaults to Intl.supportedValuesOf("timeZone"), falling back to ~45 curated zones where that's unavailable. |
| label | ReactNode | - | mono uppercase caption above the trigger. |
| placeholder | string | 'search zones…' | |
| liveSeconds | boolean | false | tick the clock every second instead of every 30. |
| disabled | boolean | false | |
| ariaLabel | string | 'time zone' | |
| className | string | - |