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

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


## Overview

The `<RegionSelector>` component is a drop-down that allows users to select their region.
It is a client-side component that reads region data from the [`<GTProvider>` context](/docs/next/api/components/gtprovider).

## Reference

### Returns

A `<select>` element that allows the user to choose their region, or `null` if no regions are available.

### Props

| Prop                            | Type        | Default | Description                                                                                                                                                                                   |
| ------------------------------- | ----------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `regions`                       | `string[]`  | —       | An optional array of ISO 3166 region codes (e.g. `['US', 'CA', 'GB']`) to display. If not provided, regions are inferred from supported locales.                                              |
| `placeholder`                   | `ReactNode` | —       | Optional placeholder content to display as the first option when no region is selected.                                                                                                       |
| `customMapping`                 | `object`    | —       | Optional mapping of region codes to custom display names, emojis, or associated locales. Values can be a string (display name) or an object with `name`, `emoji`, and/or `locale` properties. |
| `prioritizeCurrentLocaleRegion` | `boolean`   | `true`  | If true, the region corresponding to the current locale is prioritised in the list.                                                                                                           |
| `sortRegionsAlphabetically`     | `boolean`   | `true`  | If true, regions are sorted alphabetically by display name.                                                                                                                                   |
| `asLocaleSelector`              | `boolean`   | `false` | If true, selecting a region also updates the locale to the region&#39;s associated locale.                                                                                                    |

Additional props are passed through to the underlying `<select>` element.

## Examples

### Basic usage

```jsx title="MyComponent.jsx" copy
import { RegionSelector } from 'gt-next';

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


### With custom mapping and a placeholder

```jsx title="CustomRegion.jsx" copy
import { RegionSelector } from 'gt-next';

export default function CustomRegion() {
  return (
    <RegionSelector
      regions={['US', 'CA', 'GB']}
      placeholder="Select a region"
      customMapping={{
        US: { name: "United States", emoji: "🇺🇸" },
        CA: { name: "Canada", emoji: "🇨🇦" },
        GB: { name: "United Kingdom", emoji: "🇬🇧" },
      }}
    />
  );
}
```

***


## Notes

* The `<RegionSelector>` component is client-side only.
* For a fully customised region selector UI, use the [`useRegionSelector`](/docs/next/api/helpers/use-region-selector) hook.

## Next steps

* See [`useRegionSelector`](/docs/next/api/helpers/use-region-selector) to build a custom region selector.
* See [`useRegion`](/docs/next/api/helpers/use-region) to read the current region.
* See [`<LocaleSelector>`](/docs/next/api/components/locale-selector) for the locale equivalent.