TimezonePicker

The TimezonePicker component combines Payload's translated timezone label with a compact ReactSelect input. Supply the timezones that are valid for the current feature or project.

Import

1import { TimezonePicker } from '@payloadcms/ui'

Basic usage

Timezone

Loading component example…

Store an IANA timezone identifier such as America/Detroit rather than a fixed UTC offset so daylight-saving changes can be handled correctly.

Inside the Admin Panel, Payload provides the translation context used by the label. Rendering the picker outside the Admin Panel requires the same UI providers.

Common props

These are the props most commonly used with this component. See its exported types in @payloadcms/ui for the complete list.

Prop	Type	Default	Description
`id` *	`string`	—	Identifies the underlying select input.
`options` *	`SelectFieldClient['options']`	—	Timezones displayed in the select menu.
`selectedTimezone`	`string`	—	Value of the currently selected timezone.
`onChange`	`(timezone: string) => void`	—	Runs when the selected timezone changes.
`required`	`boolean`	`false`	Marks the picker as required and prevents clear.
`readOnly`	`boolean`	`false`	Prevents the timezone from being changed.

* An asterisk denotes that a prop is required.

Was this page helpful?

See what others are building with Payload.

"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."

Get the resources you need to start building today

Microsoft chose Payload to tell the world about AI.

TimezonePicker

Import

Basic usage

Common props

Tooltip