Forms
Cascader
A picker that shows nested levels, such as prefecture then city, as side-by-side columns. Choosing an option opens its children in the next column, and the value is the path you land on.
ReactVueWeb Components
View in Storybook Playground
Examples
<Cascader aria-label="地域" options={regions} onChange={setPath} />Props
| Name | Type | Default | Description |
|---|---|---|---|
options required | CascaderOption[] | — | Root options (with nested `children`). |
value | string[] | — | Controlled selected path of values. |
defaultValue | string[] | — | Initial path when uncontrolled. @default [] |
onChange | (path: string[]) => void | — | Called with the updated path. |
aria-label | string | Cascader | Accessible label for the cascader. @default 'Cascader' |
className | string | — |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.