---
title: "React Select Localization  Example | Mobiscroll"
component: "Select"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/select/localization"
---

# Localization - React Select demo

React Select component localization example supporting 37 languages, button text with full RTL capability. For React and Next.JS.

- [Live demo](https://demo.mobiscroll.com/react/select/localization)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/pickers/select/localization)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/pickers/select/localization)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/select/localization.md), [jQuery](https://demo.mobiscroll.com/jquery/select/localization.md), [Angular](https://demo.mobiscroll.com/angular/select/localization.md), [Vue](https://demo.mobiscroll.com/vue/select/localization.md)

## Description

All components are fully localized. In case of the select this covers button copy, rtl and more. You can see how each example shows up by clicking on the small flag icon or checking the examples below.

**All settings can be manually overridden** [See what options the localization impacts →](https://mobiscroll.com/docs/react/select/api#localization)

## What this demo shows

- Shows a single-value select examples with different localization options.
- **Locale selector** The left side of the select shows a `Set localization to` label with a dropdown. That opens a list of available locales that updates the select component localization.
- **Localization behavior** The localized setup affects button labels, RTL layout support, and other built-in UI text and behaviors.
- **Select input** This example opens the picker when the user focuses or clicks the input.
- **Input behavior** The picker opens below the input and closes when the user clicks outside it.
- **Picker content** Show a predefined list of options in a dropdown-style popup.
- **Hover state** Hovering over an option highlights it in the picker.
- **Selection** Selecting an option marks it with a checkmark to indicate the current value.
- **Input value** Selecting an option updates the associated input with that value.

## Best for

- **Multi-language select UIs** Apps that need the same select experience in multiple languages and regional formats.
- **Region-specific experiences** Products that need translated interface copy without rebuilding the select component UI.

## Tutorial

### Set localization to

`English`

```jsx
<Select
    locale={localeEn}
/>
```

With "Arabic":

```jsx
<Select
    locale={localeAr}
/>
```

With "Bulgarian":

```jsx
<Select
    locale={localeBg}
/>
```

With "Català":

```jsx
<Select
    locale={localeCa}
/>
```

With "Cestina":

```jsx
<Select
    locale={localeCs}
/>
```

With "Chinese":

```jsx
<Select
    locale={localeZh}
/>
```

With "Croatian":

```jsx
<Select
    locale={localeHr}
/>
```

With "Dansk":

```jsx
<Select
    locale={localeDa}
/>
```

With "Deutsch":

```jsx
<Select
    locale={localeDe}
/>
```

With "English (UK)":

```jsx
<Select
    locale={localeEnGB}
/>
```

With "Español":

```jsx
<Select
    locale={localeEs}
/>
```

With "Français":

```jsx
<Select
    locale={localeFr}
/>
```

With "Greek":

```jsx
<Select
    locale={localeEl}
/>
```

With "Hindi":

```jsx
<Select
    locale={localeHi}
/>
```

With "Italiano":

```jsx
<Select
    locale={localeIt}
/>
```

With "Japanese":

```jsx
<Select
    locale={localeJa}
/>
```

With "Korean":

```jsx
<Select
    locale={localeKo}
/>
```

With "Lietuvių":

```jsx
<Select
    locale={localeLt}
/>
```

With "Magyar":

```jsx
<Select
    locale={localeHu}
/>
```

With "Nederlands":

```jsx
<Select
    locale={localeNl}
/>
```

With "Norsk":

```jsx
<Select
    locale={localeNo}
/>
```

With "Polski":

```jsx
<Select
    locale={localePl}
/>
```

With "Português Europeu":

```jsx
<Select
    locale={localePtPT}
/>
```

With "Pt. Brasileiro":

```jsx
<Select
    locale={localePtBR}
/>
```

With "Română":

```jsx
<Select
    locale={localeRo}
/>
```

With "Serbian":

```jsx
<Select
    locale={localeSr}
/>
```

With "Slovencina":

```jsx
<Select
    locale={localeSk}
/>
```

With "Suomi":

```jsx
<Select
    locale={localeFi}
/>
```

With "Svenska":

```jsx
<Select
    locale={localeSv}
/>
```

With "Thai":

```jsx
<Select
    locale={localeTh}
/>
```

With "Türkçe":

```jsx
<Select
    locale={localeTr}
/>
```

With "Ukrainian":

```jsx
<Select
    locale={localeUa}
/>
```

With "Vietnamese":

```jsx
<Select
    locale={localeVi}
/>
```

With "Русский":

```jsx
<Select
    locale={localeRu}
/>
```

With "Русский (UA)":

```jsx
<Select
    locale={localeRuUA}
/>
```

With "עברית":

```jsx
<Select
    locale={localeHe}
/>
```

With "فارسی":

```jsx
<Select
    locale={localeFa}
/>
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/react/select/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/react/select/api#opt-themeVariant) - option
- [`data`](https://mobiscroll.com/docs/react/select/api#opt-data) - option
- [`label`](https://mobiscroll.com/docs/react/select/api#opt-label) - option
- [`labelStyle`](https://mobiscroll.com/docs/react/select/api#opt-labelStyle) - option
- [`inputStyle`](https://mobiscroll.com/docs/react/select/api#opt-inputStyle) - option
- [`display`](https://mobiscroll.com/docs/react/select/api#opt-display) - option
- [`locale`](https://mobiscroll.com/docs/react/select/api#localization-locale) - option

## Code

### JSX

```jsx
import { localeEs, Select, setOptions } from '@mobiscroll/react';
import { useMemo } from 'react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

function App() {
  const myData = useMemo(
    () => [
      {
        text: 'Atlanta',
        value: 'atl',
      },
      {
        text: 'Berlin',
        value: 'ber',
      },
      {
        text: 'Boston',
        value: 'bos',
      },
      {
        text: 'Chicago',
        value: 'chi',
      },
      {
        text: 'London',
        value: 'lon',
      },
      {
        text: 'Los Angeles',
        value: 'la',
      },
      {
        text: 'New York',
        value: 'ny',
      },
      {
        text: 'Paris',
        value: 'par',
      },
      {
        text: 'San Francisco',
        value: 'sf',
      },
    ],
    [],
  );

  return (
    <Select
      data={myData}
      label="Select"
      labelStyle="stacked"
      inputStyle="outline"
      placeholder="Please Select..."
      display="bottom"
      locale={localeEs} // Sets the language of the component
    />
  );
}

export default App;
```

### TSX

```tsx
import { localeEs, Select, setOptions } from '@mobiscroll/react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

const myData = [
  {
    text: 'Atlanta',
    value: 'atl',
  },
  {
    text: 'Berlin',
    value: 'ber',
  },
  {
    text: 'Boston',
    value: 'bos',
  },
  {
    text: 'Chicago',
    value: 'chi',
  },
  {
    text: 'London',
    value: 'lon',
  },
  {
    text: 'Los Angeles',
    value: 'la',
  },
  {
    text: 'New York',
    value: 'ny',
  },
  {
    text: 'Paris',
    value: 'par',
  },
  {
    text: 'San Francisco',
    value: 'sf',
  },
];

function App() {
  return (
    <Select
      data={myData}
      label="Select"
      labelStyle="stacked"
      inputStyle="outline"
      placeholder="Please Select..."
      display="bottom"
      locale={localeEs} // Sets the language of the component
    />
  );
}

export default App;
```

## Implementation notes

- The `locale` option accepts a locale object that translates the picker's built-in UI text (e.g. `Set`/`Cancel` button labels, other chrome strings) and applies RTL layout for right-to-left locales (Arabic, Hebrew, Persian). It does not translate the app-supplied option `text`/`data` - those stay whatever the app passes in.
- Locale objects are named per-language exports, not raw strings: JS/jQuery reference them off the global as `mobiscroll.locale.<code>` (e.g. `mobiscroll.locale.es`); React, Angular, and Vue import a named export per locale from their respective package, e.g. `import { localeEs } from '@mobiscroll/angular'` / `'@mobiscroll/react'` / `'@mobiscroll/vue'`.
- Per-framework binding: JS/jQuery pass `locale: mobiscroll.locale.es` inside `.select({...})`; React binds `locale={localeEs}` as a prop on `<Select>`; Angular binds `[locale]="localeEs"` on `<mbsc-select>` after importing/assigning `localeEs` on the component; Vue binds `:locale="localeEs"` on `<MbscSelect>` after importing `localeEs`.
- Switching locale at runtime (as the demo's language dropdown does) is imperative even outside JS/jQuery when driven by a control external to the component: JS/jQuery call `inst.setOptions({ locale: mobiscroll.locale[code] })` on the instance (JS: captured directly from the return value of `mobiscroll.select(...)`; jQuery: obtained via `.mobiscroll('getInst')`); in a component-driven app the equivalent is updating the bound `locale` value/prop and letting the framework re-render.
- "All settings can be manually overridden" means any individual option (e.g. custom button text) set explicitly on the picker takes precedence over the string that locale would otherwise supply - locale sets defaults, not overrides.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-react.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config react
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config react --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/react/getting-started/installation

## Related demos

- Previous: [Event hooks](https://demo.mobiscroll.com/react/select/event-hooks.md) - React Select demo with event hooks for custom integration and functionality.
- Next: [RTL support](https://demo.mobiscroll.com/react/select/rtl-right-to-left.md) - React Select Right-to-left rendering demo with group options for quick navigation. With full RTL language support and source.