Accessibility notes

Keyboard accessible by default with semantic markup, visible focus treatment, and tokenized states. Add descriptive labels for icon-only or decorative usage.

Dependency notes

Check Installation for shared peers. This component keeps styling in Tailwind classes and the --zui-* token contract.

Intl & Time

Timezone Select

Pick from the full IANA timezone database with search-by-city, region grouping, and live wall-clock previews per zone.

Timezone select variants playground

Pick an appearance and size to preview the timezone select. Toggle Show output / Show code and the snippet updates to match the selected variant.

Appearance

Size

Show timeShow offsetGroup by region

Timezone Select API

Generated from the package prop types and variant definitions.

TimezoneSelect

TimezoneSelectProps

Variants

Prop	Type	Default
appearance	`defaultghostoutline`	default
size	`lgmdsm`	md

State

Prop	Type	Default
defaultValue	`string \| undefined`	none
onValueChange	`((timeZone: string, info: TimezoneInfo) => void) \| undefined`	none
value	`string \| undefined`	none

Behavior

Prop	Type	Default
disabled	`boolean \| undefined`	none
groupByRegion	`boolean \| undefined`	none
locale	`string \| undefined`	none
pinnedTimezones	`string[] \| undefined`	none
placeholder	`string \| undefined`	none
showOffset	`boolean \| undefined`	none
showTime	`boolean \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

TimezoneSelectVariant

TimezoneSelectVariantProps

Behavior

Prop	Type	Default
appearance	`'default' \| 'outline' \| 'ghost' \| null \| undefined`	none
size	`'md' \| 'sm' \| 'lg' \| null \| undefined`	none

What it does

TimezoneSelect renders a searchable dropdown of every IANA timezone, grouped by geographic region. Each option shows the zone name, the current UTC offset, and optionally a live preview of the current time in that zone.

API

Accepts value/onChange controlled props, an optional placeholder, and region grouping configuration. Returns the IANA timezone string (e.g. 'America/New_York'). Supports multi-select and single-select modes.

Common use cases

Meeting planners with multi-timezone participant selection
User timezone settings in profile and account forms
Event scheduling forms with live offset preview

Accessibility

The component follows the ARIA combobox pattern with listbox role, live region announcements for search results, and full keyboard navigation including type-ahead and arrow keys.

Next.js integration notes

Use a dynamic import with ssr: false since Intl enumeration APIs run on the client. The component is fully compatible with React Server Components when wrapped in a client boundary.

FAQ

How are timezones sourced?

The component uses Intl.supportedValuesOf('timeZone') to enumerate the IANA timezone database natively supported by the browser — no static list to maintain.

Can I filter by region?

Yes. Timezones are automatically grouped by region (Americas, Europe, Asia, etc.) with expandable group headers. You can also search by city or offset.