A hierarchy picker: flat { id, parentId } nodes rendered as an expandable tree in a floating panel.
ExpandedCollapsedToned nodes
<TreeSelect nodes={projects} bind:value placeholder="Pick a project" />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { TreeSelect } from '@chanrg/4ui';<TreeSelect nodes={projects} bind:value placeholder="Pick a project" />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
nodes | { id, label, parentId?, tone? }[] | [] | Flat node list; parentId builds the tree. |
value | string | null ($bindable) | null | Selected node id. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- role="tree"/"treeitem" with aria-expanded on branch nodes.
- Expand toggles are separate labelled buttons from selection.