RTL & Internationalization

DotSelect has full support for right-to-left (RTL) layouts and ships with 15 built-in locales.

RTL Support

Automatic Detection

DotSelect automatically detects RTL direction from the document or nearest parent element's dir attribute:

html

<html dir="rtl" lang="ar">
  <body>
    <!-- DotSelect automatically renders in RTL mode -->
  </body>
</html>

<select data-dot-select data-placeholder="اختر...">
  <option value="1">الخيار الأول</option>
  <option value="2">الخيار الثاني</option>
  <option value="3">الخيار الثالث</option>
</select>

import { DotSelect } from 'dot-select'

const ds = new DotSelect('select[data-dot-select]')

// API
ds.getValue()
ds.setValue(['value'])
ds.clear()
ds.destroy()

import { useEffect, useRef } from 'react'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

export default function Select() {
  const ref = useRef(null)

  useEffect(() => {
    const ds = new DotSelect(ref.current)
    return () => ds.destroy()
  }, [])

  return (
    <select data-dot-select data-placeholder="اختر...">
      <option value="1">الخيار الأول</option>
      <option value="2">الخيار الثاني</option>
      <option value="3">الخيار الثالث</option>
    </select>
  )
}

<template>
  <select data-dot-select data-placeholder="اختر...">
    <option value="1">الخيار الأول</option>
    <option value="2">الخيار الثاني</option>
    <option value="3">الخيار الثالث</option>
  </select>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

const selectRef = ref(null)
let ds = null

onMounted(() => {
  ds = new DotSelect(selectRef.value)
})

onBeforeUnmount(() => {
  ds?.destroy()
})
</script>

Per-Element RTL

Apply RTL to a specific select without changing the document direction:

<div dir="rtl">
  <select data-dot-select data-placeholder="اختر مدينة...">
    <option value="riyadh">الرياض</option>
    <option value="jeddah">جدة</option>
    <option value="mecca">مكة المكرمة</option>
  </select>
</div>

import { DotSelect } from 'dot-select'

const ds = new DotSelect('select[data-dot-select]')

// API
ds.getValue()
ds.setValue(['value'])
ds.clear()
ds.destroy()

import { useEffect, useRef } from 'react'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

export default function Select() {
  const ref = useRef(null)

  useEffect(() => {
    const ds = new DotSelect(ref.current)
    return () => ds.destroy()
  }, [])

  return (
    <div dir="rtl">
      <select data-dot-select data-placeholder="اختر مدينة...">
        <option value="riyadh">الرياض</option>
        <option value="jeddah">جدة</option>
        <option value="mecca">مكة المكرمة</option>
      </select>
    </div>
  )
}

<template>
  <div dir="rtl">
    <select data-dot-select data-placeholder="اختر مدينة...">
      <option value="riyadh">الرياض</option>
      <option value="jeddah">جدة</option>
      <option value="mecca">مكة المكرمة</option>
    </select>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

const selectRef = ref(null)
let ds = null

onMounted(() => {
  ds = new DotSelect(selectRef.value)
})

onBeforeUnmount(() => {
  ds?.destroy()
})
</script>

Or use the data-dir attribute directly:

<select data-dot-select data-dir="rtl" data-placeholder="اختر...">
  <option value="1">الخيار الأول</option>
  <option value="2">الخيار الثاني</option>
</select>

import { DotSelect } from 'dot-select'

const ds = new DotSelect('select[data-dot-select]')

// API
ds.getValue()
ds.setValue(['value'])
ds.clear()
ds.destroy()

import { useEffect, useRef } from 'react'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

export default function Select() {
  const ref = useRef(null)

  useEffect(() => {
    const ds = new DotSelect(ref.current)
    return () => ds.destroy()
  }, [])

  return (
    <select data-dot-select data-dir="rtl" data-placeholder="اختر...">
      <option value="1">الخيار الأول</option>
      <option value="2">الخيار الثاني</option>
    </select>
  )
}

<template>
  <select data-dot-select data-dir="rtl" data-placeholder="اختر...">
    <option value="1">الخيار الأول</option>
    <option value="2">الخيار الثاني</option>
  </select>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

const selectRef = ref(null)
let ds = null

onMounted(() => {
  ds = new DotSelect(selectRef.value)
})

onBeforeUnmount(() => {
  ds?.destroy()
})
</script>

What RTL Affects

Dropdown alignment flips to the right edge
Search input text aligns right
Selected items flow right-to-left
Clear and arrow icons swap positions
Remove buttons appear on the left side of items
Keyboard navigation respects RTL direction

Internationalization (i18n)

Setting a Locale

Use data-locale to set the language for UI strings:

<select data-dot-select data-locale="fr" data-searchable="true" data-placeholder="Rechercher...">
  <option value="1">Option un</option>
  <option value="2">Option deux</option>
</select>

import { DotSelect } from 'dot-select'

const ds = new DotSelect('select[data-dot-select]')

// API
ds.getValue()
ds.setValue(['value'])
ds.clear()
ds.destroy()

import { useEffect, useRef } from 'react'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

export default function Select() {
  const ref = useRef(null)

  useEffect(() => {
    const ds = new DotSelect(ref.current)
    return () => ds.destroy()
  }, [])

  return (
    <select data-dot-select data-locale="fr" data-searchable="true" data-placeholder="Rechercher...">
      <option value="1">Option un</option>
      <option value="2">Option deux</option>
    </select>
  )
}

<template>
  <select data-dot-select data-locale="fr" data-searchable="true" data-placeholder="Rechercher...">
    <option value="1">Option un</option>
    <option value="2">Option deux</option>
  </select>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

const selectRef = ref(null)
let ds = null

onMounted(() => {
  ds = new DotSelect(selectRef.value)
})

onBeforeUnmount(() => {
  ds?.destroy()
})
</script>

Available Locales

DotSelect ships with the following built-in locales:

Code	Language	Code	Language
`en`	English (default)	`it`	Italian
`ar`	Arabic	`ja`	Japanese
`de`	German	`ko`	Korean
`es`	Spanish	`nl`	Dutch
`fr`	French	`pt`	Portuguese
`he`	Hebrew	`ru`	Russian
`hi`	Hindi	`tr`	Turkish
`zh`	Chinese (Simplified)

Locale Strings

Each locale provides translations for the following UI strings:

Key	English Default	Description
`noResults`	`"No results found"`	Shown when search yields no matches
`searching`	`"Searching..."`	Shown while an AJAX request is in progress
`loadMore`	`"Load more results"`	Pagination trigger text
`addItem`	`"Add \"{@term}\""`	Prompt for creating new items (tagging)
`loading`	`"Loading..."`	Shown during initial data load
`removeItem`	`"Remove"`	Aria label for item remove buttons
`clearAll`	`"Clear all"`	Aria label for clear button
`inputTooShort`	`"Type at least {@count} characters"`	Shown when input is below min-chars threshold

Registering a Custom Locale

Add your own locale using DotSelect.registerLocale():

DotSelect.registerLocale('custom-locale', {
  noResults: 'Nothing matches your search',
  searching: 'Looking for results...',
  loadMore: 'Show more',
  addItem: 'Create "{@term}"',
  loading: 'Please wait...',
  removeItem: 'Delete',
  clearAll: 'Reset',
  inputTooShort: 'Please type at least {@count} characters',
});

Then use it:

<select data-dot-select data-locale="custom-locale" data-searchable="true">
  <option value="1">Option 1</option>
</select>

import { DotSelect } from 'dot-select'

const ds = new DotSelect('select[data-dot-select]')

// API
ds.getValue()
ds.setValue(['value'])
ds.clear()
ds.destroy()

import { useEffect, useRef } from 'react'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

export default function Select() {
  const ref = useRef(null)

  useEffect(() => {
    const ds = new DotSelect(ref.current)
    return () => ds.destroy()
  }, [])

  return (
    <select data-dot-select data-locale="custom-locale" data-searchable="true">
      <option value="1">Option 1</option>
    </select>
  )
}

<template>
  <select data-dot-select data-locale="custom-locale" data-searchable="true">
    <option value="1">Option 1</option>
  </select>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

const selectRef = ref(null)
let ds = null

onMounted(() => {
  ds = new DotSelect(selectRef.value)
})

onBeforeUnmount(() => {
  ds?.destroy()
})
</script>

Overriding Specific Strings

You do not need to provide all strings. Missing keys fall back to the English default:

DotSelect.registerLocale('en-custom', {
  noResults: 'Sorry, nothing found!',
  // All other strings use English defaults
});

Per-Element String Overrides

Override individual strings on a specific select without creating a full locale:

<select
  data-dot-select
  data-searchable="true"
  data-no-results-text="No matching users"
  data-searching-text="Fetching users..."
  data-load-more-text="Load more users"
>
  <option value="1">Alice</option>
  <option value="2">Bob</option>
</select>

import { DotSelect } from 'dot-select'

const ds = new DotSelect('select[data-dot-select]')

// API
ds.getValue()
ds.setValue(['value'])
ds.clear()
ds.destroy()

import { useEffect, useRef } from 'react'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

export default function Select() {
  const ref = useRef(null)

  useEffect(() => {
    const ds = new DotSelect(ref.current)
    return () => ds.destroy()
  }, [])

  return (
    <select
      data-dot-select
      data-searchable="true"
      data-no-results-text="No matching users"
      data-searching-text="Fetching users..."
      data-load-more-text="Load more users"
    >
      <option value="1">Alice</option>
      <option value="2">Bob</option>
    </select>
  )
}

<template>
  <select
    data-dot-select
    data-searchable="true"
    data-no-results-text="No matching users"
    data-searching-text="Fetching users..."
    data-load-more-text="Load more users"
  >
    <option value="1">Alice</option>
    <option value="2">Bob</option>
  </select>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

const selectRef = ref(null)
let ds = null

onMounted(() => {
  ds = new DotSelect(selectRef.value)
})

onBeforeUnmount(() => {
  ds?.destroy()
})
</script>

TIP

Per-element overrides take priority over the locale. This lets you set a global locale while customizing text for specific selects.

Combining RTL and i18n

For full RTL language support, combine dir="rtl" with the appropriate locale:

html

<html dir="rtl" lang="ar">
  <body>
  </body>
</html>

<select
  data-dot-select
  data-locale="ar"
  data-searchable="true"
  data-allow-clear="true"
  data-placeholder="ابحث عن مستخدم..."
  data-ajax-url="/api/users?q={@term}"
>
</select>

import { DotSelect } from 'dot-select'

const ds = new DotSelect('select[data-dot-select]')

// API
ds.getValue()
ds.setValue(['value'])
ds.clear()
ds.destroy()

import { useEffect, useRef } from 'react'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

export default function Select() {
  const ref = useRef(null)

  useEffect(() => {
    const ds = new DotSelect(ref.current)
    return () => ds.destroy()
  }, [])

  return (
    <select
      data-dot-select
      data-locale="ar"
      data-searchable="true"
      data-allow-clear="true"
      data-placeholder="ابحث عن مستخدم..."
      data-ajax-url="/api/users?q={@term}"
    >
    </select>
  )
}

<template>
  <select
    data-dot-select
    data-locale="ar"
    data-searchable="true"
    data-allow-clear="true"
    data-placeholder="ابحث عن مستخدم..."
    data-ajax-url="/api/users?q={@term}"
  >
  </select>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

const selectRef = ref(null)
let ds = null

onMounted(() => {
  ds = new DotSelect(selectRef.value)
})

onBeforeUnmount(() => {
  ds?.destroy()
})
</script>

Hebrew Example

<div dir="rtl">
  <select
    data-dot-select
    data-locale="he"
    data-searchable="true"
    data-placeholder="חפש..."
    data-allow-clear="true"
  >
    <option value="">חפש...</option>
    <option value="1">תל אביב</option>
    <option value="2">ירושלים</option>
    <option value="3">חיפה</option>
  </select>
</div>

import { DotSelect } from 'dot-select'

const ds = new DotSelect('select[data-dot-select]')

// API
ds.getValue()
ds.setValue(['value'])
ds.clear()
ds.destroy()

import { useEffect, useRef } from 'react'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

export default function Select() {
  const ref = useRef(null)

  useEffect(() => {
    const ds = new DotSelect(ref.current)
    return () => ds.destroy()
  }, [])

  return (
    <div dir="rtl">
      <select
        data-dot-select
        data-locale="he"
        data-searchable="true"
        data-placeholder="חפש..."
        data-allow-clear="true"
      >
        <option value="">חפש...</option>
        <option value="1">תל אביב</option>
        <option value="2">ירושלים</option>
        <option value="3">חיפה</option>
      </select>
    </div>
  )
}

<template>
  <div dir="rtl">
    <select
      data-dot-select
      data-locale="he"
      data-searchable="true"
      data-placeholder="חפש..."
      data-allow-clear="true"
    >
      <option value="">חפש...</option>
      <option value="1">תל אביב</option>
      <option value="2">ירושלים</option>
      <option value="3">חיפה</option>
    </select>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

const selectRef = ref(null)
let ds = null

onMounted(() => {
  ds = new DotSelect(selectRef.value)
})

onBeforeUnmount(() => {
  ds?.destroy()
})
</script>

Bidirectional Content

DotSelect handles mixed LTR/RTL content within the same select:

<select data-dot-select data-dir="rtl" data-searchable="true">
  <option value="1">محمد (Mohammed)</option>
  <option value="2">فاطمة (Fatima)</option>
  <option value="3">علي (Ali)</option>
</select>

import { DotSelect } from 'dot-select'

const ds = new DotSelect('select[data-dot-select]')

// API
ds.getValue()
ds.setValue(['value'])
ds.clear()
ds.destroy()

import { useEffect, useRef } from 'react'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

export default function Select() {
  const ref = useRef(null)

  useEffect(() => {
    const ds = new DotSelect(ref.current)
    return () => ds.destroy()
  }, [])

  return (
    <select data-dot-select data-dir="rtl" data-searchable="true">
      <option value="1">محمد (Mohammed)</option>
      <option value="2">فاطمة (Fatima)</option>
      <option value="3">علي (Ali)</option>
    </select>
  )
}

<template>
  <select data-dot-select data-dir="rtl" data-searchable="true">
    <option value="1">محمد (Mohammed)</option>
    <option value="2">فاطمة (Fatima)</option>
    <option value="3">علي (Ali)</option>
  </select>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

const selectRef = ref(null)
let ds = null

onMounted(() => {
  ds = new DotSelect(selectRef.value)
})

onBeforeUnmount(() => {
  ds?.destroy()
})
</script>

WARNING

When using RTL with templates, make sure your template HTML includes appropriate dir attributes on inline elements if they contain LTR content (such as numbers or English text) to ensure correct rendering.

RTL & Internationalization ​

RTL Support ​

Automatic Detection ​

Per-Element RTL ​

What RTL Affects ​

Internationalization (i18n) ​

Setting a Locale ​

Available Locales ​

Locale Strings ​

Registering a Custom Locale ​

Overriding Specific Strings ​

Per-Element String Overrides ​

Combining RTL and i18n ​

Hebrew Example ​

Bidirectional Content ​