# gt-next: General Translation Next.js SDK: LocaleSelector
URL: https://generaltranslation.com/en-US/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's locale.
It is a client side component that provides a dropdown to select 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 dropdown. If not provided, the list of locales from the `<GTProvider>` context is used.
- **`customNames`** (optional): `{[locale: string]: string}`
  - An optional object to map 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.
- Check out the [`useLocaleSelector`](/docs/next/api/helpers/use-locale-selector) hook for defining a custom locale selector.
- Learn more about [locale strings](/docs/core/locales).