# gt-next: General Translation Next.js SDK: LocaleSelector
URL: https://generaltranslation.com/en-GB/docs/next/api/components/locale-selector.mdx
---
title: LocaleSelector
description: API reference for the LocaleSelector component
---

{/* AUTO-GENERATED: Do not edit directly. Edit the template in content/docs-templates/ instead. */}


## Overview

The `<LocaleSelector>` component is used to select the user&#39;s locale.
It is a client-side component that provides a drop-down for selecting the locale.

## Reference

### Returns

A component that allows the user to select their locale.

### Props

* **`locales`** (optional): `string[]`
  * An optional list of locales (e.g. `['en', 'es-MX', 'fr']`) to populate the drop-down. If not provided, the list of locales from the `<GTProvider>` context is used.
* **`customNames`** (optional): `{[locale: string]: string}`
  * An optional object for mapping locale codes to custom display names.
  * Example: `{{ 'en-US': 'English (United States)', 'es': 'Español' }}`

## Examples

### Basic usage

```jsx
import { LocaleSelector } from 'gt-next';

export default function MyComponent() {
  return <LocaleSelector />;
}
```


### Usage with `customNames`

```jsx
import { LocaleSelector } from 'gt-next';

export default function MyComponent() {
  const myCustomNames = {
    en: 'English',
    es: 'Español',
    'fr-CA': 'Français (Canada)',
  };
  return <LocaleSelector customNames={myCustomNames} />;
}
```

***


## Notes

* The `<LocaleSelector>` component allows you to select a different locale for your app.
* The `<LocaleSelector>` component is not available in the server component.

## Next steps

* Learn more about the [`useLocale`](/docs/next/api/helpers/use-locale) hook.
* Learn more about the [`useLocaleSelector`](/docs/next/api/helpers/use-locale-selector) hook for defining a custom locale selector.
* Learn more about [locale strings](/docs/core/locales).