Tree Select
Selects
Source and install need .
pnpm dlx shadcn@latest add @assembli/cascade-selectCascade Select
A cascader for picking a path through a hierarchy. The trigger reads "Electronics / Audio / Headphones"; columns open on hover or arrow keys, load children on demand with a spinner on the row, and search finds paths at every depth. It can pick any level, take several paths as chips, and becomes a drill-down list with a back header when the columns don't fit.
Props
Other props pass through to the root element.
options*
CascadeOption[]
loadChildren
(option: CascadeOption, path: CascadeOption[]) => Promise<CascadeOption[]>
Loads the children of a node marked
isLeaf: false. Gets the node and its path from the top.changeOnSelect
boolean
Lets any level be picked, not only the last one.
expandTrigger
"hover" | "click"
Whether hovering a parent opens its column, or only clicking does. Defaults to hover.
showSearch
boolean
Shows a search field that finds paths at every depth. Defaults to true.
layout
"auto" | "columns" | "drill"
autoshows columns side by side when they fit and a drill-down list with a back header when they don't.label
React.ReactNode
hint
React.ReactNode
description
React.ReactNode
error
React.ReactNode
Replaces the description and marks the trigger
aria-invalid.placeholder
React.ReactNode
searchPlaceholder
string
separator
string
Shown between levels in the trigger. Defaults to "/".
clearable
boolean
Adds a clear button once something is picked. Defaults to true.
maxChips
number
Chips shown in the trigger in multiple mode before "+N". Defaults to 2.
disabled
boolean
required
boolean
name
string
Submits each picked path, joined with "/", with a surrounding form.
open
boolean
defaultOpen
boolean
onOpenChange
(open: boolean) => void
| Description | |||
|---|---|---|---|
| options* | CascadeOption[] | – | |
| loadChildren | (option: CascadeOption, path: CascadeOption[]) => Promise<CascadeOption[]> | – | Loads the children of a node marked |
| changeOnSelect | boolean | – | Lets any level be picked, not only the last one. |
| expandTrigger | "hover" | "click" | – | Whether hovering a parent opens its column, or only clicking does. Defaults to hover. |
| showSearch | boolean | – | Shows a search field that finds paths at every depth. Defaults to true. |
| layout | "auto" | "columns" | "drill" | – |
|
| label | React.ReactNode | – | |
| hint | React.ReactNode | – | |
| description | React.ReactNode | – | |
| error | React.ReactNode | – | Replaces the description and marks the trigger |
| placeholder | React.ReactNode | – | |
| searchPlaceholder | string | – | |
| separator | string | – | Shown between levels in the trigger. Defaults to "/". |
| clearable | boolean | – | Adds a clear button once something is picked. Defaults to true. |
| maxChips | number | – | Chips shown in the trigger in multiple mode before "+N". Defaults to 2. |
| disabled | boolean | – | |
| required | boolean | – | |
| name | string | – | Submits each picked path, joined with "/", with a surrounding form. |
| open | boolean | – | |
| defaultOpen | boolean | – | |
| onOpenChange | (open: boolean) => void | – |
