Combobox: Right to left

The popup picks up the field’s direction, so the clear button, chips and items mirror without extra props.

المدينة

المدن

"use client"

import { DirectionProvider } from "@base-ui/react/direction-provider"

import {
  Combobox,
  ComboboxChip,
  ComboboxChips,
  ComboboxChipsInput,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
  ComboboxValue,
} from "@/components/ui/combobox"
import { Label } from "@/components/ui/label"

const cities = ["القاهرة", "الرياض", "دبي", "بيروت", "عمّان", "الدوحة"]

export function ComboboxRtl() {
  return (
    <DirectionProvider direction="rtl">
      <div dir="rtl" className="flex w-full max-w-xs flex-col gap-4">
        <div className="flex flex-col gap-2">
          <Label htmlFor="combobox-rtl">المدينة</Label>
          <Combobox items={cities} defaultValue={cities[2]}>
            <ComboboxInput
              id="combobox-rtl"
              placeholder="اختر مدينة"
              showClear
            />
            <ComboboxContent>
              <ComboboxEmpty>لا توجد نتائج.</ComboboxEmpty>
              <ComboboxList>
                {(item: string) => (
                  <ComboboxItem key={item} value={item}>
                    {item}
                  </ComboboxItem>
                )}
              </ComboboxList>
            </ComboboxContent>
          </Combobox>
        </div>
        <div className="flex flex-col gap-2">
          <Label htmlFor="combobox-rtl-chips">المدن</Label>
          <Combobox items={cities} multiple defaultValue={[cities[0]]}>
            <ComboboxChips>
              <ComboboxValue>
                {(values: string[]) => (
                  <>
                    {values.map((value) => (
                      <ComboboxChip key={value}>{value}</ComboboxChip>
                    ))}
                    <ComboboxChipsInput id="combobox-rtl-chips" />
                  </>
                )}
              </ComboboxValue>
            </ComboboxChips>
            <ComboboxContent>
              <ComboboxList>
                {(item: string) => (
                  <ComboboxItem key={item} value={item}>
                    {item}
                  </ComboboxItem>
                )}
              </ComboboxList>
            </ComboboxContent>
          </Combobox>
        </div>
      </div>
    </DirectionProvider>
  )
}

Add this example

This adds the example as components/examples/combobox/rtl.tsx, together with the Combobox component and the HextaUI theme tokens it needs.

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

To add only the component, follow the Combobox installation.

Props in this example

The Combobox props this example sets, from the API reference.

Combobox

Prop	Type	Default
`items`The options. Filtered as you type and passed to the list’s render function.	`Item[] \| Group[]`	`–`
`multiple`Select several values, shown as chips.	`boolean`	`false`
`defaultValue`	`Value \| Value[] \| null`	`–`

ComboboxInput

Prop	Type	Default
`showClear`Show a clear button in the chevron’s place while there is a value.	`boolean`	`false`
`placeholder`	`string`	`–`

ComboboxItem

Prop	Type	Default
`value`The item this row represents.	`Item`	`–`

Every prop is in the Combobox API reference.

More Combobox examples

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