Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA dropdown for choosing a path through a tree: the field shows the full path, the panel is a column cascader, and typing switches to a flat list of full paths.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it in forms where the value is a path (category, location, team) and space is tight. Use Cascader when the columns should always be visible.
Search covers the options that are loaded; lazily loaded branches that have not been opened are not searched.
| Prop | Type | Default | Description |
|---|---|---|---|
options | see Cascader | - | The tree. |
value / defaultValue | string[] | [] | The chosen path. |
onValueChange | (value, path) => void | - | Runs when a path is chosen or cleared. |
loadChildren / expandTrigger / changeOnSelect | see Cascader | - | Passed to the cascader. |
separator | string | / | Between labels in the field and in search results. |
placeholder / searchPlaceholder | string | see source | Copy. |
clearable | boolean | true | Show the clear button. |
disabled | boolean | false | Disables the field. |
The field is a button with role=combobox, aria-expanded and the panel opens as a popover that returns focus to the field on close. Search results are a listbox with aria-activedescendant; No matching path. is announced. The path in the field is plain text.