Cascader

Beta

A field that opens columns of nested choices, such as governorate, district and area, and fills in the whole path.

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 cascader
Also works with shadcn: npx shadcn@latest add @ritla/cascader
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.

cascader.tsx

import { Cascader } from "@/components/ui/cascader";<Cascader label="Delivery area" options={areas} onValueChange={setPath} />

Prop	Type	Default	Description
`options`	`{ value, label, children?, disabled? }[]`	None	The tree; the last level has no `children`.
`value / defaultValue / onValueChange`	`string[]`	None	The chosen path, a value per level.
`levelLabels`	`string[]`	None	Names each column for screen readers.
`placeholder / separator`	`string`	`" / "`	The text before a choice, and the separator between levels.
`label / required / helperText / error / disabled / name`	`…`	None	As on the Select.

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
`EnterSpace`	Opens the panel, opens the next column, and chooses on the last level.
`ArrowDownArrowUp`	Moves within a column.
`ArrowRightArrowLeft`	To the next or previous column. In Arabic, ArrowLeft goes to the next.
`Escape`	Closes the panel and returns focus to the field.

Each column is a listbox named by its level, and an open item carries aria-expanded.
The field reads its label and the chosen path.

Numerals: It usually holds no numbers.
Arabic typography: label-16 in the field, label-14 Medium in the columns.