# TimezonePicker

Source: https://payloadcms.com/docs/ui-components/timezone-picker

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

```tsx
import { TimezonePicker } from '@payloadcms/ui'
```

## Basic usage

**Implementation**

```tsx
const options = [
  { label: 'America/Detroit', value: 'America/Detroit' },
  { label: 'America/Los_Angeles', value: 'America/Los_Angeles' },
  { label: 'Europe/London', value: 'Europe/London' },
]

const [timezone, setTimezone] = useState('America/Detroit')

<TimezonePicker
  id="timezone"
  onChange={setTimezone}
  options={options}
  selectedTimezone={timezone}
/>
```

**Styling**

Customize the translated label and compact ReactSelect control through the TimezonePicker wrapper.

```css
.timezone-picker-wrapper .field-label {
  color: #5947e5;
  font-weight: 600;
}

.timezone-picker .rs__control {
  background: #f3f1ff;
  border: 1px solid #c8c0ff;
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
}
```

- `background`: Timezone control surface.
- `border`: Timezone control outline.
- `color`: Translated label color.
- `padding`: Space inside the compact selector.

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._