---
title: "Javascript Select RTL support Example | Mobiscroll"
component: "Select"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/select/rtl-right-to-left"
---

# RTL support - JavaScript Select demo

Javascript Select Right-to-left rendering demo with group options for quick navigation. With full RTL language support and source. Plain JS api for usage everywhere.

- [Live demo](https://demo.mobiscroll.com/javascript/select/rtl-right-to-left)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/pickers/select/rtl-right-to-left)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/select/rtl-right-to-left.md), [Angular](https://demo.mobiscroll.com/angular/select/rtl-right-to-left.md), [React](https://demo.mobiscroll.com/react/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/javascript/select/api#localization-locale) settings.

**Explore the different locales** [Check out this example →](https://demo.mobiscroll.com/javascript/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

```js
mobiscroll.select('#my-select', {
    rtl: true
});
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/javascript/select/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/javascript/select/api#opt-themeVariant) - option
- [`inputElement`](https://mobiscroll.com/docs/javascript/select/api#opt-inputElement) - option
- [`rtl`](https://mobiscroll.com/docs/javascript/select/api#localization-rtl) - option
- [`display`](https://mobiscroll.com/docs/javascript/select/api#opt-display) - option

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

mobiscroll.select('#demo', {
  inputElement: document.getElementById('demo-input'),
  rtl: true,
  display: 'bottom',
});
```

### HTML

```html
<label>
    Select
    <input mbsc-input id="demo-input" placeholder="Please select..." data-dropdown="true" data-input-style="outline" data-label-style="stacked" />
</label>
<select id="demo" data-input-style="box" data-label-style="stacked">
    <option value="1">Atlanta</option>
    <option value="2">Berlin</option>
    <option value="3">Boston</option>
    <option value="4">Chicago</option>
    <option value="5">London</option>
    <option value="6">Los Angeles</option>
    <option value="7">New York</option>
    <option value="8">Paris</option>
    <option value="9">San Francisco</option>
</select>
```

## 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-javascript.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 javascript
   ```

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 javascript --trial`.

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

## Related demos

- Previous: [Localization](https://demo.mobiscroll.com/javascript/select/localization.md) - Javascript Select component localization example supporting 37 languages, button text with full RTL capability.