TreeSelect 树选择器
从可展开层级树中选择一个节点，并在紧凑触发器中显示结果。
使用概览
适合使用
- 目标值来自目录或组织层级，但页面不适合常驻整棵树时。
不建议使用
- 需要多选、比较多个分支，或节点之间没有父子关系时。
真实示例
目标文件夹选择
从文档目录树中选择一个目标文件夹。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/tree-select.json基础用法
导入
import { TreeSelect } from "@richardqiu/quartz/tree-select";JSX
<TreeSelect aria-label="目标文件夹" placeholder="选择文件夹" emptyLabel="没有文件夹" nodes={[{ id: "docs", label: "文档", children: [{ id: "reports", label: "报告" }] }]} expandLabel={(node, expanded) => `${expanded ? "收起" : "展开"}${node.label}`} />状态与控制摘要
默认
键盘焦点可见
已打开
已选择
空状态
已禁用
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value | string | 未设置 | 受控提供当前选中树节点的稳定标识。 |
组合结构
- 01
TreeSelect
键盘约定
- Enter 或空格键打开树，Escape 关闭并恢复焦点；树内行为继承 TreeView。
可访问性契约
- 触发器与嵌套树分别使用由使用方提供的标签。
- 已选稳定 ID 参与原生表单提交。