TreeSelect

Pick one node from a collapsible tree inside a popup. Branches expand and collapse like a tree view; picking a node shows its label on the trigger and stores the value in a hidden input.

Example

Team

<TreeSelect
  id="team"
  label="Team"
  name="team"
  options={[
    { value: "engineering", label: "Engineering", children: [
      { value: "ada", label: "Ada Lovelace" },
      { value: "grace", label: "Grace Hopper" },
    ] },
    { value: "design", label: "Design" },
  ]}
/>

Preselected node

Mentor

<TreeSelect
  id="mentor"
  label="Mentor"
  name="mentor"
  options={…}
  value="grace"
/>

Selectable branches

By default only leaves select (selectable="leaf"): activating a branch toggles it. Withselectable="any", branches pick their own value instead.

Department

<TreeSelect
  id="department"
  label="Department"
  name="department"
  options={…}
  selectable="any"
/>

Error state

Reviewer

Choose a reviewer.

<TreeSelect
  id="reviewer"
  label="Reviewer"
  name="reviewer"
  options={…}
  error="Choose a reviewer."
/>

Props

Prop	Type	Default	Description
`id`	`string`	-	Required. Names Field/panel/message ids (trigger itself carries no id).
`label`	`string`	-	Visible label; kept in the trigger name and panel name.
`name`	`string`	`id`	Hidden-input form name; carries the selected value.
`options`	`CascadeOption[]` (`{ value; label; disabled?; children? }`)	-	Tree nodes; branches expand, leaves select.
`value`	`string`	`""`	Preselected node value; its ancestors open on first open.
`selectable`	`"any" \| "leaf"`	`"leaf"`	Whether branches select or only toggle.
`placeholder`	`string`	`"Select …"`	Empty-state trigger text; defaults to the lowercased label.
`hint`	`string`	-	Help text below the trigger.
`error`	`string`	-	Error message; sets `aria-invalid` on the trigger.
`required`	`boolean`	`false`	Marks the label required.
`disabled`	`boolean`	`false`	Non-interactive; trigger cannot open.
`class`	`string`	-	Style passthrough.

Accessibility

Trigger keeps the label in its accessible name, with aria-haspopup="dialog", aria-expanded, aria-controls.
Panel is a dialog named "{label} options" holding a real tree with roving tabindex, aria-expanded branches, and single-select aria-selected.
Keyboard mirrors the tree pattern (Up/Down/Home/End travel, Right expands, Left collapses to parent); Enter/Space picks when allowed, otherwise toggles. Escape closes and refocuses the trigger.
Hint and error connect via aria-describedby; error sets aria-invalid="true" on the trigger.
Selection dispatches ink:treeselect:change with { value }.