Combobox

Beta

A searchable select that matches Arabic the way people type it: احمد finds أحمد, with the matched letters in bold.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Add the component
$ npx ritla add combobox
Also works with shadcn: npx shadcn@latest add @ritla/combobox
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

combobox.tsx

import { Combobox } from "@/components/ui/combobox";<Combobox label="Customer" options={customers} onValueChange={setCustomer} />

Prop	Type	Default	Description
`options`	`{ value, label, description?, disabled? }[]`	None	The options; `description` is a second line that tells two matches apart.
`value / defaultValue / onValueChange`	`string \| null`	None	The chosen value.
`label / required / helperText / error / disabled`	`FieldProps`	None	As on the Input field.
`note`	`ReactNode \| null`	None	The footer note on how matching works; `null` hides it.
`emptyText`	`(query) => ReactNode`	None	What to say when nothing matches.
`matchArabic / normalizeArabic`	`(text, query) => [start, end] \| null`	None	The matching helpers, for any other search.

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`ArrowDownArrowUp`	Opens the list and moves between options.
`Enter`	Chooses the highlighted option.
`Escape`	Closes the list.

The field, list and footer mirror, with the city at the end of the row on the left.

Names are data and keep their own direction: an Arabic name stays Arabic in the English layout.

Numerals: It usually holds no numbers.
Arabic typography: body-16 for the option with the match in Semibold; label-12 for the second line and the footer.
Mixed-direction text: The no-results sentence isolates the query, so its direction holds inside the sentence.