TimeZonePicker

Forms · src/components/TimeZonePicker/TimeZonePicker.tsx

Pick a time zone by naming a city.

Cities, not zone ids: nobody knows they are in Europe/Amsterdam, and a list of zone ids asks a person to translate where they live into a database key. The offset is shown beside each city and is computed for a real moment, so it is the actual offset today rather than the zone's standard one.

Import

import { TimeZonePicker } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
id	string
label	React.ReactNode
hint	React.ReactNode
size	'sm' | 'md' | 'lg'
value	string	An IANA zone id, e.g. Asia/Seoul.
defaultValue	string
placeholder	string
emptyText	React.ReactNode
zones	Array<[string, string]>	Replace the city list. Each entry is [ianaZone, cityLabel].
now	Date	The moment the offsets are shown for. Defaults to now, so DST is already applied.
className	string
onChange	(value: string, option: ComboboxOption) => void