# nylas-locale-switch

Source: https://developer.nylas.com/docs/reference/ui/locale-switch/

The `nylas-locale-switch` component is a UI component that allows users to select a timezone and language.

## Overview

- **Tag**: `<nylas-locale-switch>`
- **Encapsulation**: shadow

## Installation

### HTML / Web Component

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@nylas/web-elements/dist/cdn/nylas-web-elements/nylas-web-elements.esm.js"></script>
```

### React

```bash
npm install @nylas/react
```

## Usage

### HTML

```html
<nylas-locale-switch></nylas-locale-switch>
```

### React

```jsx
import { NylasLocaleSwitch } from '@nylas/react';

export default function Example() {
  return <NylasLocaleSwitch />;
}
```

## Props

| Property | Attribute | Type | Default | Required | Description |
| --- | --- | --- | --- | --- | --- |
| `bookingInfo` | `booking-info` | undefined \| { primaryParticipant: NylasSchedulerBookingParticipant; startTime?: Date \| undefined; endTime?: Date \| undefined; timezone?: string \| undefined; language?: string \| undefined; guests?: NylasSchedulerBookingParticipant[] \| undefined; additionalFields?: Record<string, { value: string; type?: string \| undefined; readOnly?: boolean \| undefined; }> \| undefined; } | - | No | The booking info. |
| `selectedLanguage` | `selected-language` | string | `this.bookingInfo?.language || navigator.language` | No |  |
| `selectedTimezone` | `selected-timezone` | string | `this.bookingInfo?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone` | No |  |
| `themeConfig` | `theme-config` | any | - | No | The theme configuration. |

## Events

| Event | Detail | Description |
| --- | --- | --- |
| `languageChanged` | string | This event is fired when the language is changed. |
| `timezoneChanged` | string | This event is fired when the timezone is changed. |

## CSS shadow parts

| Part | Description |
| --- | --- |
| `nls` | The locale switch container |
| `nls__language` | The language select container |
| `nls__language-drop-button` | The language dropdown button |
| `nls__language-drop-content` | The language dropdown content |
| `nls__language-drop-label` | The language dropdown label |
| `nls__language-dropdown` | The language dropdown |
| `nls__timezone` | The timezone select container |
| `nls__timezone-drop-button` | The timezone dropdown button |
| `nls__timezone-drop-button-selected-label` | The timezone dropdown button selected label |
| `nls__timezone-drop-content` | The timezone dropdown content |
| `nls__timezone-drop-label` | The timezone dropdown label |
| `nls__timezone-dropdown` | The timezone dropdown |

## Dependencies

This component uses the following child components:

- [`<select-dropdown>`](/docs/reference/ui/select-dropdown/)
- [`<globe-icon>`](/docs/reference/ui/globe-icon/)
- [`<translate-icon>`](/docs/reference/ui/translate-icon/)

## Used by

This component is used inside:

- [`<nylas-scheduling>`](/docs/reference/ui/scheduling/)