build69
Sign inGet API key
build69  /  Components  /  Selection & Choice  /  TreeSelect

TreeSelect

v1.0.7NewUpdated 27 Aug 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 · 12 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
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'—

Related

Platform docsAll componentsSource files