Cascader
Pick one item from options that nest several levels deep by walking columns left to right, like a field on a related object (Invoice / Account / Owner) or a region / country / city.
Master
Open the field and walk the columns: [+] opens a related record's fields, » its child records. Type to search every path. Switch variant to panel for the inline field picker.
Usage
Use Cascader when the choice sits at the end of a path and people need to see each level: fields on related records, categories, locations. It is one component: pass options, each with a value, a label and, when it opens another level, children. variant field is a form field that opens the columns in a dropdown and shows the picked path (Invoice / Account / Owner); variant panel draws the columns inline, like the field picker in a modal, with the page showing the choice. Each row can carry a path in brackets (the related object or id), a type badge (Text, Num, Date) and a relation mark: parent ([+], opens the related record's fields) or children (», opens related child records). A legend under the columns explains the marks when any row has one. Only the last level can be picked unless changeOnSelect lets any level be the answer. searchable adds a search box that lists every matching path. See contracts/cascader.json for the full contract. A portaled panel takes the theme of whatever opened it, so it is dark with a dark app frame even though it is drawn at the end of the page. A label set at the start goes back on top of the field when the box around it is narrower than 554px, since a 234px label column would leave too little of the field to type in.
Do's
- The answer sits at the end of a path of two or more levels, like a field on a related record.
- People need to see which level each choice lives on while they browse.
- A field picker in a modal or side panel, with variant panel.
Don'ts
- Do not use it for a flat list. Use Select.
- Do not use it to browse or arrange a hierarchy without picking. Use TreeView.
- Do not nest Selects to fake levels, or build local columns. Use Cascader.
- Do not use raw hex.
<Cascader
label="Invoice field"
options={fields}
defaultValue={path}
onChange={setPath}
variant="field"
searchable
/>