Free
Pro

Select Tree

A single-select dropdown that presents options as an expandable tree. Search filters the hierarchy, expand/collapse works like base-tree, and the control integrates with Angular Forms via [(ngModel)] / formControlName.

Pronew

Select Tree — part of Base UI Pro

Unlock it plus 90 pro blocks, widgets & layouts — $99 one-time. Lifetime updates, 14-day money-back guarantee.

Unlock Pro

Basic usage

Pass a nested SelectTreeNode[] to [nodes]. The form value is the selected node’s value.

Selected value: "us-ca"

HTML


TypeScript

Leaf-only selection

Use onlyLeaf when folders should expand but only files (leaves) are selectable.

Selected value: null

HTML

Clearable

Add clearable to show an x button that resets the value to null.

HTML

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add select-tree

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add select-tree
// Paths are relative to aliases.components (default: src/app/components)
import { SelectTreeComponent, SelectTreeNode } from './select-tree/select-tree.component';

@Component({
  selector: 'app-your-component',
  imports: [
    SelectTreeComponent
  ],
  template: `...`
})
export class YourComponent {}

API for select-tree — generated from JSDoc in the library source.

API reference for select-tree
APIMemberTypeDefaultDescription
SelectTreeNodelabelstring — Display label.
SelectTreeNodevalueunknown — Value written to the form control when this node is selected.
SelectTreeNodeiconstring — Optional icon name from the icon sprite.
SelectTreeNodechildrenSelectTreeNode[] — Nested child nodes.
SelectTreeNodeexpandedboolean — Whether the folder is expanded (ignored while a search query is active).
SelectTreeNodedisabledboolean — When true, the node cannot be selected.
SelectTreeNodedataRecord<string, unknown> — Arbitrary payload attached to the node.
base-select-treeclassstring''Extra host classes merged via `cn()`.
base-select-treenodesSelectTreeNode[][]Hierarchical nodes to display in the dropdown.
base-select-treeplaceholderunknown'Select…'Placeholder shown when nothing is selected.
base-select-treeonlyLeafbooleanfalseWhen true, only leaf nodes (no children) can be selected.
base-select-treeclearablebooleanfalseShows a clear button when a value is selected.
base-select-treedisabledbooleanfalseDisables the control (also set by forms via `setDisabledState`).
base-select-tree(selectionChange)unknown | null — Emitted with the selected value whenever selection changes (including clear).