Select Tree

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

Pronew

Select Tree — part of Ply 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.

Location

Selected value: "us-ca"

HTML

<ply-label>Location</ply-label>
<ply-select-tree
  [nodes]="locations"
  [(ngModel)]="selectedLocation"
  placeholder="Choose a location…">
</ply-select-tree>

TypeScript

locations: SelectTreeNode[] = [
  {
    label: 'North America',
    value: 'na',
    children: [
      { label: 'California', value: 'us-ca' },
      { label: 'New York', value: 'us-ny' },
    ],
  },
];
selectedLocation: unknown = null;

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-select-tree-example',
  imports: [
    SelectTreeComponent
  ],
  template: `...`
})
export class SelectTreeExampleComponent {}

Install

bash

npx ply-ui-cli add select-tree

Leaf-only selection

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

File

Selected value: null

HTML

<ply-select-tree [nodes]="files" onlyLeaf [(ngModel)]="selectedFile"></ply-select-tree>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-select-tree-example',
  imports: [
    SelectTreeComponent
  ],
  template: `...`
})
export class SelectTreeExampleComponent {}

Install

bash

npx ply-ui-cli add select-tree

Clearable

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

Region

HTML

<ply-select-tree [nodes]="locations" clearable [(ngModel)]="value"></ply-select-tree>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-select-tree-example',
  imports: [
    SelectTreeComponent
  ],
  template: `...`
})
export class SelectTreeExampleComponent {}

Install

bash

npx ply-ui-cli add select-tree

Installation

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

bash

npx ply-ui-cli add select-tree

API Reference

For AI agents

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

bash

npx -y ply-ui-mcp

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

typescript (Example)

// Install: npx ply-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
API	Member	Type	Default	Description
`SelectTreeNode`	`label`	`string`	—	Display label.
`SelectTreeNode`	`value`	`unknown`	—	Value written to the form control when this node is selected.
`SelectTreeNode`	`icon`	`string`	—	Optional icon name from the icon sprite.
`SelectTreeNode`	`children`	`SelectTreeNode[]`	—	Nested child nodes.
`SelectTreeNode`	`expanded`	`boolean`	—	Whether the folder is expanded (ignored while a search query is active).
`SelectTreeNode`	`disabled`	`boolean`	—	When true, the node cannot be selected.
`SelectTreeNode`	`data`	`Record<string, unknown>`	—	Arbitrary payload attached to the node.
`ply-select-tree`	`class`	`string`	`''`	Extra host classes merged via `cn()`.
`ply-select-tree`	`nodes`	`SelectTreeNode[]`	`[]`	Hierarchical nodes to display in the dropdown.
`ply-select-tree`	`placeholder`	`unknown`	`'Select…'`	Placeholder shown when nothing is selected.
`ply-select-tree`	`onlyLeaf`	`boolean`	`false`	When true, only leaf nodes (no children) can be selected.
`ply-select-tree`	`clearable`	`boolean`	`false`	Shows a clear button when a value is selected.
`ply-select-tree`	`disabled`	`boolean`	`false`	Disables the control (also set by forms via `setDisabledState`).
`ply-select-tree`	`(selectionChange)`	`unknown \| null`	—	Emitted with the selected value whenever selection changes (including clear).

Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 215 components and blocks (125 free), delivered shadcn-style: npx ply-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).