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

# RTL support - Vue Select demo

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

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

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

```vue
<template>
  <MbscSelect :rtl="true" />
</template>
```

## API used in this demo

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

## Code

### SFC JS

```vue
<script setup>
import { MbscSelect, setOptions } from '@mobiscroll/vue'

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'
  }
]
</script>

<template>
  <MbscSelect
    :rtl="true"
    :data="myData"
    label="Select"
    display="bottom"
    inputStyle="outline"
    labelStyle="stacked"
    placeholder="Please select..."
  />
</template>
```

### SFC TS

```vue
<script setup lang="ts">
import { MbscSelect, setOptions } from '@mobiscroll/vue'

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'
  }
]
</script>

<template>
  <MbscSelect
    :rtl="true"
    :data="myData"
    label="Select"
    display="bottom"
    inputStyle="outline"
    labelStyle="stacked"
    placeholder="Please select..."
  />
</template>
```

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

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

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

## Related demos

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