TreeSelect

Single-select tree in a Select-shaped trigger. The panel is one scrollable tree, portaled to document.body at z-index 4000 (plus 10 inside each nested overlay). Multiple selection, check-strategy, and filtering are follow-ups.

Demos

Department

The trigger joins ancestor labels with / . The switcher expands a branch. Choosing a node commits and closes.

design

<gk-tree-select clearable placeholder="請選擇部門">

Leaf label only

<gk-tree-select show-path="false">

Sizes and status

<gk-tree-select size="sm" status="error">

Empty

<gk-tree-select open lang="zh-Hant">

Inside a form item

<gk-form-item label="部門" path="dept">

API

Properties

Name	Type	Default	Notes
value	string | number | null	null	Selected node key
options / data	TreeNode[]	[]	{ label, value or key, children?, disabled?, isLeaf? }
placeholder	string	''
separator	string	' / '
size	sm | md | lg	md	Trigger 28 / 34 / 40
clearable	boolean	false
status	success | warning | error	—
default-expanded-keys	key[]	[]
expanded-keys	key[] | null	null	null is uncontrolled
expand-on-click-node	boolean	true	A collapsed branch expands, then a selectable node commits
selectable	(node) => boolean	any non-disabled node
show-path	boolean	true	false shows the selected label only
placement	bottom-start | top-start	bottom-start	Flips when space is tight
dropdown-width	number | 'trigger'	'trigger'	Capped at 320px
filterable / multiple	boolean	false	Present, not implemented in v1
check-strategy	child | parent | all	child	Ignored until multiple ships

Events

Name	Detail
change, update:value	{ value, option, path }
expand, update:expanded-keys	{ keys, node, expanded }
clear

Parts

trigger, value, placeholder, clear, chevron, panel, tree, node, switcher, indent, label, empty.

Keyboard: ArrowDown, Enter, or Space opens. Up and Down move. Left and Right collapse and expand. Enter commits. Esc closes and returns focus to the trigger.