cnc-select-tree
A dropdown whose options are a TREE rather than a flat list — for choosing a department, a category, a folder. Single or multiple, optionally searchable and clearable, and submittable as part of a form.
Quick start
Bind $value to a node id and pass the tree through root. Groups are
selectable in their own right, so a branch is a legitimate answer unless your data says
otherwise.
value: frontend
<cnc-select-tree
class="w-72"
placeholder="Choose a team..."
$value="team"
@change="team = $event.detail.value"
$root='{ "children": [ { "id": "eng", "label": "Engineering", "children": [ … ] } ] }'
></cnc-select-tree>Node fields
| Field | Purpose |
|---|---|
| id |
The node's identity, and what value holds. value is accepted
as an alias on the node.
|
| label | The row's text. text is accepted as an alias. |
| children | An array of the same shape. A node with children is a branch — and is still selectable itself. |
Usage guidance
Reach for this over cnc-select only when the HIERARCHY helps the user choose
— when knowing a team sits under Engineering is part of picking it. A tree of one level is
a list with extra machinery, and a flat select searches and reads better.
Every branch is selectable, so decide whether that is what you want. Where only leaves are valid
answers, validate on your side after change — the widget has no leaves-only
mode and will happily hand you a branch id.
Turn on searchable once the tree outgrows a screenful. Expanding branch by branch
to find a known item is the slowest way through a deep tree, and the search box is focused on
open so typing starts immediately.