'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Forms
Cascader
Pick from nested options column by column: country, then city.
Ant Design: Cascader
import { Cascader } from '@alea/ui';
Examples
Cascader
Arrow right or Enter opens the next level.
CityWhere you work from
Props
Cascader props
Pick from nested options column by column: country, then city (Ant's Cascader).
| Prop | Type | Default | Description |
|---|---|---|---|
optionsrequired | CascaderOption[] | - | The tree of options: id, label, children. |
allowsParentSelection | boolean | - | Lets people pick a parent too, not only the last level. |
defaultValue | Key[] | - | The path of ids to start with. |
description | ReactNode | - | Help text shown under the field. |
isDisabled | boolean | - | Disables every part of it. |
label | ReactNode | - | The visible label. |
onChange | ((path: Key[], options: CascaderOption[]) => void) | - | Called with the path of ids. |
placeholder | string | 'Select…' | Shown while there is no value. |
value | Key[] | - | The picked path of ids (controlled). |
Accessibility
- Each column is a listbox named after its parent.
Keyboard
| Key | Does |
|---|---|
| Arrow Up / Down | Move in a column |
| Arrow Right or Enter | Open the next level |
| Arrow Left | Back to the previous level |
| Escape | Close |
Do and don't
Do
- Use it for deep but predictable hierarchies (country, state, city).
- Show the whole path in the trigger.
Don't
- Don't use it for more than four levels.
- Don't use it when people know the leaf name: use Autocomplete.