---
title: "React Select RTL support Example | Mobiscroll"
component: "Select"
framework: "React"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/react/select/rtl-right-to-left"
---

# RTL support - React Select demo

React Select Right-to-left rendering demo with group options for quick navigation. With full RTL language support and source. For React and Next.js.

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

## Description

RTL support is built in and can be explicitly controlled through the `rtl` option. If not set, it is inherited from the [`locale`](https://mobiscroll.com/docs/react/select/api#localization-locale) settings.

**Explore the different locales** [Check out this example →](https://demo.mobiscroll.com/react/select/localization)

## What this demo shows

- Shows a single-value select example with RTL support.
- **RTL control** A side panel next to the select includes an `Enable Right-To-Left rendering` switch, which is enabled by default.
- **Select inputs** 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

- **RTL interfaces** Building select for products used in right-to-left languages such as Arabic, Hebrew, or Farsi.
- **Multilingual applications** Supporting users who need the same select workflow in both LTR and RTL rendering modes.

## Tutorial

### Enable Right-To-Left rendering

- [x] Turn RTL on

```jsx
<Select
    rtl={true}
/>
```

## 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
- [`rtl`](https://mobiscroll.com/docs/react/select/api#localization-rtl) - option
- [`display`](https://mobiscroll.com/docs/react/select/api#opt-display) - option
- [`inputStyle`](https://mobiscroll.com/docs/react/select/api#opt-inputStyle) - option
- [`labelStyle`](https://mobiscroll.com/docs/react/select/api#opt-labelStyle) - option

## Code

### JSX

```jsx
import { 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"
      rtl={true}
      display="bottom"
      inputStyle="outline"
      labelStyle="stacked"
      placeholder="Please select..."
    />
  );
}

export default App;
```

### TSX

```tsx
import { Select, setOptions } from '@mobiscroll/react';
import { FC } from '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',
  },
];

const App: FC = () => (
  <Select
    data={myData}
    label="Select"
    rtl={true}
    display="bottom"
    inputStyle="outline"
    labelStyle="stacked"
    placeholder="Please select..."
  />
);
export default App;
```

## Implementation notes

- `rtl` is a boolean option on the `Select` instance; `true` mirrors the picker layout (text direction, checkmark side, popup alignment) for right-to-left locales. When left unset, direction is inherited from the active `locale`.
- The demo toggles the switch by calling `.setOptions({ rtl: checked })` on the select instance - JS captures it directly from the return value of `mobiscroll.select(...)`, jQuery instead obtains it via `.mobiscroll('getInst')` - `rtl` can be flipped at runtime without recreating the component.
- `inputElement` points the select at a separate `<input>` used as the trigger/display field, decoupled from the `<select>` element that supplies the option list; the popup opens on focus/click of that input and closes on outside click.
- The underlying `<select>` element's `<option value="...">Label</option>` pairs are consumed directly as the option list - no separate `data` array is required when a native `<select>` is used as the source element.
- Per framework: JS/jQuery pass `rtl: true` inside `.select({ ... })` / `mobiscroll.select(el, { ... })` at init and change it later via `.setOptions({ rtl })`; React sets `rtl={true}` as a prop on `<Select>`; Angular binds `[rtl]="true"` on `<mbsc-select>`; Vue binds `:rtl="true"` on `<MbscSelect>`.

## 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: [Localization](https://demo.mobiscroll.com/react/select/localization.md) - React Select component localization example supporting 37 languages, button text with full RTL capability.