build69
build69  /  Components  /  Selection & Choice  /  TreeSelect

TreeSelect

v1.0.16NewUpdated 19 Oct 2026

Select input whose popover is a checkable tree. Single mode is a radio-like leaf select; multiple mode adds tri-state parent checkboxes with a checkStrategy (all / parent / child) controlling which values are emitted. Se

View source← Back to catalog

Preview

Live · 13 stories
DefaultOpen ↗
▸Why this is recommendedtreeselecthierarchymulti-select+5

The default, out-of-the-box TreeSelect.

Recommended for+14
  • ✓Category pickers (product / GL account trees)
  • ✓Org-unit or department assignment
  • ✓Warehouse-zone / location selection
  • ✓Permission-scope pickers
Tags+6
treeselecthierarchymulti-selectcheckboxtri-statechipssearchdefault
Features+4
  • Single (radio-like leaf) and multiple (tri-state checkbox) modes
  • checkStrategy: 'all' | 'parent' | 'child' controls emitted values
  • Search filter keeps ancestor context and matched subtrees
  • Chips in trigger with per-chip remove (multiple)
  • Controlled + uncontrolled value, open state, default expansion
  • ARIA tree pattern: roving tabindex, arrows / Space / Enter / Home / End
  • Disabled nodes and branches skipped by parent toggles
  • Trigger sizes sm / md / lg
  • Labelled by FormField: id and aria-* land on the trigger button, the placeholder name steps aside, the popup tree is named by the same label, and the trigger fills the field column (standalone w-64)
Not recommended for−2
  • ✕Flat option lists (use Combobox / Select)
  • ✕Browsing large hierarchies outside a form (use TreeView)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "TreeSelect" })

Usage

import { TreeSelect } from '@/components/inputs/tree-select';

<TreeSelect
  multiple
  checkStrategy="parent"
  options={departmentTree}
  value={departments}
  onValueChange={setDepartments}
  placeholder="Assign departments"
/>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
options

Root nodes ({ value, label, children?, disabled? })

TreeSelectNode[]yes
multiple

Tri-state checkbox mode

boolean—
value

Controlled selection (leaf value single; values per checkStrategy multiple)

string | string[]—
onValueChange

Selection change callback

function—
checkStrategy

Which values are emitted for fully-checked subtrees (multiple, default child)

'all' | 'parent' | 'child'—
defaultExpanded

Initially expanded branch values

string[]—
size

Trigger size

'sm' | 'md' | 'lg'—
aria-label

Accessible name of the trigger and tree; without it the placeholder names them, except inside a labelled FormField

string—
aria-labelledby

Id(s) of the element(s) that label the trigger and tree; wins over a FormField label

string—
id

DOM id set on the trigger button; FormField clones its field id in, and its label then names the control

string—
aria-describedby

Id(s) of hint or error text describing the trigger (FormField clones this in)

string—
aria-invalid

Mark the trigger invalid; FormField clones this in from its error prop

boolean—
aria-required

Mark the trigger required; FormField clones this in from its required prop

boolean—
className

Classes on the trigger; a width here wins over the default (w-full inside a FormField, w-64 otherwise)

string—

Related

Platform docsAll componentsSource files