Multi Select
Selects
Source and install need .
pnpm dlx shadcn@latest add @assembli/tree-selectTree Select
A checkbox tree in a popover for picking teams, folders or regions. Checking a parent checks its branch, partly picked parents show a dash and a count, and search keeps matching branches open while dimming the rest. The trigger sums up the pick as chips with +N, and checkStrategy reports full branches as the parent, the leaves or both. Real tree roles and keys, including type-ahead.
Props
Other props pass through to the root element.
nodes*
TreeSelectNode[]
value
string[]
defaultValue
string[]
onValueChange
(value: string[], nodes: TreeSelectNode[]) => void
checkStrategy
TreeCheckStrategy
Default
"parent"Defaults to
parent.defaultExpanded
string[] | "all"
Branches open when the popup first opens, or
"all".label
React.ReactNode
hint
React.ReactNode
description
React.ReactNode
error
React.ReactNode
Replaces the description and marks the trigger
aria-invalid.placeholder
React.ReactNode
Default
"Select…"searchPlaceholder
string
Default
"Search…"showSearch
boolean
Default
trueShows a search field above the tree. Defaults to true.
maxChips
number
Default
2Chips shown in the trigger before "+N". Defaults to 2.
disabled
boolean
required
boolean
name
string
Submits every value with a surrounding form.
open
boolean
defaultOpen
boolean
Default
falseonOpenChange
(open: boolean) => void
| Description | |||
|---|---|---|---|
| nodes* | TreeSelectNode[] | – | |
| value | string[] | – | |
| defaultValue | string[] | – | |
| onValueChange | (value: string[], nodes: TreeSelectNode[]) => void | – | |
| checkStrategy | TreeCheckStrategy | "parent" | Defaults to |
| defaultExpanded | string[] | "all" | – | Branches open when the popup first opens, or |
| label | React.ReactNode | – | |
| hint | React.ReactNode | – | |
| description | React.ReactNode | – | |
| error | React.ReactNode | – | Replaces the description and marks the trigger |
| placeholder | React.ReactNode | "Select…" | |
| searchPlaceholder | string | "Search…" | |
| showSearch | boolean | true | Shows a search field above the tree. Defaults to true. |
| maxChips | number | 2 | Chips shown in the trigger before "+N". Defaults to 2. |
| disabled | boolean | – | |
| required | boolean | – | |
| name | string | – | Submits every value with a surrounding form. |
| open | boolean | – | |
| defaultOpen | boolean | false | |
| onOpenChange | (open: boolean) => void | – |
