TimeZoneSelect

Pick a time zone by city or offset. The reader's own zone comes first.

SourcePackage @weft-js/warp

Preview

tsx

import { TimeZoneSelect } from '@weft-js/warp'export function Basic() {  return (    <TimeZoneSelect label="Time zone" defaultValue="Europe/Stockholm" hint="Deploy windows follow this zone." />  )}

Installation

npm install @weft-js/warp

Usage

tsx

import { TimeZoneSelect } from '@weft-js/warp'<TimeZoneSelect label="Time zone" defaultValue="Europe/Stockholm" hint="Deploy windows follow this zone." />

A short list

zones limits it to the ones you use.

tsx

import { TimeZoneSelect } from '@weft-js/warp'export function Offices() {  return (    <TimeZoneSelect label="Office" zones={OFFICE_ZONES} defaultValue="Asia/Tokyo" />  )}const OFFICE_ZONES = ['Europe/Stockholm', 'Europe/Berlin', 'Europe/Lisbon', 'America/New_York', 'America/Los_Angeles', 'Asia/Kolkata', 'Asia/Tokyo']

States

Read-only also needs open={false}, which keeps the list shut.

tsx

import { Grid, Stack, Text, TimeZoneSelect } from '@weft-js/warp'export function States() {  return (    <Grid cols={3} gap="group">      <Cell name="Empty"><TimeZoneSelect label="Time zone" /></Cell>      <Cell name="Filled"><TimeZoneSelect label="Time zone" defaultValue="Europe/Berlin" /></Cell>      <Cell name="Hint"><TimeZoneSelect label="Time zone" hint="Deploy windows follow this zone." /></Cell>      <Cell name="Invalid"><TimeZoneSelect label="Time zone" error="Choose a time zone." /></Cell>      <Cell name="Disabled"><TimeZoneSelect label="Time zone" defaultValue="Europe/Berlin" disabled /></Cell>      <Cell name="Read-only"><TimeZoneSelect label="Time zone" defaultValue="Europe/Berlin" readonly /></Cell>    </Grid>  )}const Cell = (p: { name: string; children?: unknown }) => (  <Stack gap="tight">    <Text role="caption" subtle>{p.name}</Text>    {p.children}  </Stack>)

Workspace region form

All four pickers, posting with a plain form.

tsx

import { Button, CountrySelect, CurrencySelect, Grid, LanguageSelect, Row, Stack, Text, TimeZoneSelect, Toaster, toast } from '@weft-js/warp'export function FormWorkspaceRegion() {  const save = (e: Event) => {    e.preventDefault()    toast.show({ title: 'Workspace updated', description: 'New invoices use these settings.' })  }  return (    <>      <Stack as="form" gap="group" onSubmit={save}>        <Text role="heading">Workspace region</Text>        <Grid cols={2} gap="group">          <CountrySelect label="Country" name="country" preferred={NEAR_COUNTRIES} defaultValue="SE" />          <LanguageSelect label="Language" name="language" preferred={NEAR_LANGUAGES} defaultValue="en" />          <CurrencySelect label="Currency" name="currency" preferred={NEAR_CURRENCIES} defaultValue="EUR" />          <TimeZoneSelect label="Time zone" name="zone" zones={OFFICE_ZONES} defaultValue="Europe/Stockholm" />        </Grid>        <Row justify="end"><Button type="submit">Save changes</Button></Row>      </Stack>      <Toaster />    </>  )}const NEAR_COUNTRIES = ['DE', 'FR', 'SE']const NEAR_LANGUAGES = ['en', 'de', 'ja']const NEAR_CURRENCIES = ['EUR', 'USD', 'GBP']const OFFICE_ZONES = ['Europe/Stockholm', 'Europe/Berlin', 'Europe/Lisbon', 'America/New_York', 'America/Los_Angeles', 'Asia/Kolkata', 'Asia/Tokyo']

Accessibility

EnterSpace: Opens the list
↑↓: Moves through the results
Enter: Picks the highlighted row
Esc: Closes and returns focus

API Reference

Prop	Type	Default	Description
`label`	`string`	—	The visible name, and what screen readers announce.
`hint`	`unknown`	—	A short line of help under the field.
`error`	`unknown`	—	Replaces the hint and marks the field invalid.
`icon`	`IconRef`	—	Leading icon: it sweeps with the border.
`prefix`	`unknown`	—	Text or an element inside the field before the value, such as `$`.
`suffix`	`unknown`	—	Text or an element inside the field after the value, such as `kg`.
`variant`	`"floating" \| "classic"`	—	floating (default, or the app's `warp({ fields })`) · classic: the label above.
`appearance`	`"line"`	—	`line`: only a bottom line under the value, no box or fill. The boxed field otherwise.
`size`	`"sm" \| "md" \| "lg"`	`'md'`	Control size. `md` by default.
`clearable`	`boolean`	`false`	A clear button (shown once there is a value).
`counter`	`number`	—	Maximum length, shown as a counter.
`id`	`string`	—	The element id. One is made for you if you leave it out.
`disabled`	`boolean`	`false`	Can't be focused or changed.
`readonly`	`boolean`	`false`	Shows the value and lets it be selected and copied, but not changed.
`required`	`boolean`	`false`	The form will not submit without it.
`name`	`string`	—	Posts the value with a form.
`locale`	`string`	—	The language names are shown in. Follows the page otherwise.
`today`	`string`	—	Pins "today" (server render, tests); the browser's clock otherwise.
`presentation`	`Presentation`	—	`auto` opens a popover, or a sheet when the viewport is under 600px wide; `popover` and `sheet` force one.
`value`	`string \| State<string \| null> \| null`	—	The IANA zone, like `Europe/Berlin`. Can be a `State`.
`defaultValue`	`string \| null`	—	The first value, when you don't hold it yourself.
`open`	`boolean \| State<boolean>`	—	A state box that holds whether it is open.
`defaultOpen`	`boolean`	`false`	Starts open, when the component keeps its own open state.
`referenceDate`	`string`	—	The date offsets are worked out for, since they change with daylight saving.
`zones`	`string[]`	—	Limits the list to these zones.
`showOffset`	`boolean`	`true`	Shows each zone's offset from UTC.

Event	Type	Default	Description
`onInput`	`((e: InputEvent & { currentTarget: HTMLInputElement & HTMLTextAreaElemen…`	—	Called on each keystroke.
`onValueChange`	`((v: string \| null, reason: ChangeReason) => void)`	—	Hears the new value and why it changed.
`onOpenChange`	`((o: boolean) => void)`	—	Called with `true` when it opens and `false` when it closes.