TreeSelect
A compact hierarchical form control composed from Neural Tree and the viewport-safe Popover foundation.
GET STARTED
Import
Use the canonical standalone export from its granular entry point.
Mapped hierarchical options
All option mappings accept nested property paths. Disabled nodes remain discoverable but cannot be selected.
- Engineering
- Product
- Operations
Multiple and checkbox selection
Multiple values render removable chips. Checkbox mode also derives partial parent state while keeping an immutable value array.
Multiple
- Engineering
- Product
- Operations
Checkbox
- Engineering
- Product
- Operations
Signal, reactive and template Forms
One typed value model works directly and through every Angular Forms adapter.
Signal Forms
- Engineering
- Product
- Operations
Reactive Forms
- Engineering
- Product
- Operations
Template-driven
- Engineering
- Product
- Operations
Loading, readonly, disabled and invalid
Readonly remains focusable and opens for inspection; disabled leaves the tab order. Field can supply required, invalid, pending and fluid state.
- Engineering
- Product
- Operations
- Engineering
- Product
- Operations
Typed node and value templates
Node context exposes selection and hierarchy metadata; value context exposes the typed value and resolved labels.
- EngineeringLevel 1
- ProductLevel 1
- OperationsLevel 1
Virtual hierarchy
virtualScroll delegates large visible ranges to the Tree foundation without changing the Forms contract.
Unstyled and typed slots
Combobox semantics, top-layer positioning, filtering and Tree behavior remain while Tailwind owns the surface.
- Engineering
- Product
- Operations
TREESELECT
Accessibility
Combobox and tree
The trigger exposes combobox state and controls a top-layer Tree with complete treeitem, group, expanded, selected and checked semantics.
Keyboard
Enter, Space or Arrow Down opens; Escape closes. Inside the panel, Tree owns arrows, Home/End, Enter/Space and typeahead.
Readonly and disabled
Readonly permits filtering and branch expansion but blocks value mutation. Disabled prevents opening and removes the trigger from sequential focus.
Focus and overlay
Popover matches trigger width, remains viewport-aware and restores focus. The filter receives focus only when enabled.
Forms, SSR and hydration
Stable generated IDs preserve hydration. Programmatic form writes do not emit user selection events; touch occurs on blur or panel close.
TREESELECT
API
Component
NeuralTreeSelect<TOption,TValue>Standalone FormValueControl with selector neural-tree-select.
Models and inputs
| Name | Type | Default | Description |
|---|---|---|---|
| options | readonly TOption[] | [] | Immutable hierarchical source. |
| optionLabel / optionValue / optionKey | string | label / value / empty | Nested mapping paths for display, form value and stable identity. |
| optionChildren / optionDisabled / optionIcon | string | children / disabled / iconClass | Nested structural and visual mappings. |
| value | NeuralTreeSelectValue<TValue> | null | Two-way value model; arrays are used for multiple modes. |
| expandedKeys | ReadonlySet<NeuralTreeKey> | new Set() | Controlled Tree expansion. |
| filterValue | string | '' | Two-way filter query. |
| selectionMode | 'single' | 'multiple' | 'checkbox' | 'single' | Selection and value shape contract. |
| filter / clearable / closeOnSelect | boolean | true | Filter, clear and close policies. |
| loading / disabled / readonly | boolean | false | Independent async and interaction states. |
| required / invalid / pending / touched / dirty | boolean | false | Forms and Field composition state. |
| name / fluid / unstyled | string / boolean | empty / false | Form name, sizing and visual ownership. |
| virtualScroll | boolean | false | Uses Tree fixed-range rendering. |
| placeholder / filterPlaceholder | string | localized English defaults | Empty trigger and filter prompt. |
| emptyLabel / loadingLabel | string | English defaults | Panel state labels. |
| clearLabel / dropdownLabel | string | English defaults | Accessible action labels. |
| ariaLabel / treeSelectId / treeSelectClass | string | empty | Naming, stable identity and additive root class. |
| classes | NeuralTreeSelectClasses | {} | Typed additive classes for every slot. |
| compareWith | (first, second) => boolean | Object.is | Form-value equality. |
Events
selectionChangeNeuralTreeSelectChange<TValue,TOption>Changed user selection with previous value and source.
selected / unselectedNeuralTreeSelectChange<TValue,TOption>Semantic direction-specific selection event.
clearedNeuralTreeSelectClear<TValue>Explicit clear with previous value.
filterChangeNeuralTreeSelectFilterEventUser-authored query.
opened / closedvoidPopover visibility lifecycle.
touchvoidBlur or panel-close touch lifecycle.
Methods
togglePanel(event?)Opens or closes the top-layer hierarchy.
closePanel(restoreFocus = true)Closes and optionally restores trigger focus.
focus(options?)Focuses the combobox trigger.
reset()Clears filter and restores the empty value for the mode.
clear(event?)Clears mutable user selection and emits cleared.
remove(key,event)Removes one multiple-value chip.
Typed templates
neuralTreeSelectNodeTyped node, flat item, selected, partial, expanded and level context.
neuralTreeSelectValueTyped value and resolved labels context.
Typed class slots
roottriggervalueplaceholderchipListchipchipRemoveclearButtondropdownButtonpanelheaderfiltertreeemptyloadingPublic types
NeuralTreeSelectValue<TValue>NeuralTreeSelectChange<TValue,TOption>NeuralTreeSelectClear<TValue>NeuralTreeSelectFilterEventNeuralTreeSelectClassesNeuralTreeSelectValueTemplateContext<TValue>Compatibility alias
TreeSelectComponent is deprecated. New human and generated code must import NeuralTreeSelect.
TREESELECT
Design tokens
TreeSelect deliberately exposes a compact component token layer and inherits shared control, Tree and Popover tokens.
Sizing
--neural-tree-select-widthComponent inline size.
--neural-tree-select-panel-max-heightPanel maximum block size.
Surface
--neural-tree-select-colorComponent foreground color.
--neural-tree-select-backgroundComponent background surface.