Time Zone SelectNew

A time zone picker: offsets, cities and names in the reader's language, searchable.

$ pnpm dlx shadcn@latest add @dashral/time-zone-select

Time zone

Reports and reminders use this time zone.

Installation

$ pnpm dlx shadcn@latest add @dashral/time-zone-select

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Or by its full URL: https://dashral.com/r/time-zone-select.json

Usage

example.tsx

1import { TimeZoneSelect } from "@/components/dashral/time-zone-select"
2
3<TimeZoneSelect label="Time zone" defaultValue="local" onValueChange={(zone) => saveSetting("timeZone", zone)} />

Using the npm package? Import from @dashral/ui/components/time-zone-select instead, here and in the examples; the rest is the same.

Examples

With the time there

The picked zone's time, live, beside it.

Meeting time zone

It's — there now.

Only some zones

timeZones limits the list to your offices.

Office

API reference

TimeZoneSelect

Also takes every prop of Combobox(opens in a new tab).

Prop	Type	Default
`label`	`ReactNode` Shown above, linked to the control.	—
`description`	`ReactNode` A hint under the control.	—
`error`	`boolean \| ReactNode` true shows the error style; a message also shows under the control.	—
`labelAction`	`ReactNode` At the end of the label's row, e.g. a “Forgot password?” link or the current value.	—
`withAsterisk`	`boolean` Marks the label with an asterisk, e.g. alongside required.	`false`
`value`	`string` The time zone, an IANA name ("Asia/Jakarta"), controlled.	—
`defaultValue`	`string \| "local"` The first one; "local" for the reader's own, once the page has loaded.	—
`onValueChange`	`(value: string) => void` Called with the new value.	—
`timeZones`	`string[]` Only these.	`every zone the browser knows`
`locale`	`string` For the zones' names.	`the LocaleProvider's`
`placeholder / searchPlaceholder`	`string` As on Combobox.	`"Select a time zone" / "Search time zones…"`
`classNames`	`{ root, label, description, error, trigger, content, item }` Classes for each part.	—
`className`	`string` Extra classes, merged with cn() so yours win.	—

Keyboard

Keys	Action
`Enter`or`Space`	Open the list
`Type`	Search by city, region or name
`↓`or`↑ and Enter`	Pick one

Accessibility

With label, description or error, the id, aria-describedby and aria-invalid are wired up for you.
Each zone reads its offset and city ("GMT+07:00 Jakarta"), with its name in the page's language under it.