104Get started
HextaUI

Native select: Right to left

The chevron and padding move to the other side.

import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"

export function NativeSelectRtl() {
  return (
    <div dir="rtl">
      <NativeSelect aria-label="اللغة">
        <NativeSelectOption value="">اختر لغة</NativeSelectOption>
        <NativeSelectOption value="ar">العربية</NativeSelectOption>
        <NativeSelectOption value="en">الإنجليزية</NativeSelectOption>
        <NativeSelectOption value="fr">الفرنسية</NativeSelectOption>
      </NativeSelect>
    </div>
  )
}

Add this example

This adds the example as components/examples/native-select/rtl.tsx, together with the Native select component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/native-select-rtl.json

To add only the component, follow the Native select installation.

More Native select examples

See them all, with keyboard support and accessibility notes, on the Native select page.

Related components