Tree Select

Material Design 3 hierarchical dropdown selection component

Tree Select

Tree Select is a hierarchical dropdown component that allows users to select from nested options. It’s ideal for categories, organizational structures, file systems, or any parent-child data relationships. Uses the native HTML Popover API for dropdown behavior.

Basic Usage

Basic Tree Select

Category 1
Category 2
Category 3

With Dropdown Open

Tree Select Dropdown

Electronics
Smartphones
Laptops
Tablets
Clothing
Books

With Selection

Tree Select with Selection

Electronics
Smartphones
Laptops

Variants

Outlined (Default)

Outlined Tree Select

Category 1

Filled

Filled Tree Select

Category 1

Sizes

Small

Small Tree Select

Category 1

Large

Large Tree Select

Category 1

With Checkboxes (Multiple Selection)

Tree Select with Checkboxes

Electronics
Smartphones
Laptops

States

Error State

Error State

Category
Category 1
Please select a category

Disabled

Disabled State

Loading

Loading State

With Icons

Tree Select with Icons

North America
United States
Canada

API Reference

Class Names

Class Description
.tree-select Base container (required)
.tree-select-trigger Trigger button (use with popovertarget)
.tree-select-value Selected value display
.tree-select-value-selected Has selection state
.tree-select-path Path breadcrumb display
.tree-select-arrow Dropdown arrow icon
.tree-select-clear Clear selection button
.tree-select-dropdown Dropdown container (use with popover attribute)
.tree-select-search Search input container
.tree-select-search-input Search input field
.tree-select-options Options container
.tree-select-node Tree node
.tree-select-node-expanded Expanded node
.tree-select-node-leaf Leaf node (no children)
.tree-select-node-selected Selected node
.tree-select-node-toggle Expand/collapse toggle
.tree-select-node-icon Toggle icon
.tree-select-node-label Node label text
.tree-select-node-custom-icon Custom node icon
.tree-select-children Child nodes container
.tree-select-checkbox Checkbox for multi-select
.tree-select-outlined Outlined variant
.tree-select-filled Filled variant
.tree-select-sm Small size
.tree-select-lg Large size
.tree-select-multiple Multiple selection mode
.tree-select-error Error state
.tree-select-disabled Disabled state
.tree-select-loading Loading state
.tree-select-spinner Loading spinner

HTML Structure with Popover API

<div class="tree-select">
  <button class="tree-select-trigger" popovertarget="dropdown-id">
    <span class="tree-select-value">Select a category</span>
    <svg class="tree-select-arrow">...</svg>
  </button>
  <div class="tree-select-dropdown" id="dropdown-id" popover="auto">
    <div class="tree-select-options">
      <div class="tree-select-node tree-select-node-leaf">
        <span class="tree-select-node-label">Category 1</span>
      </div>
    </div>
  </div>
</div>

With Clear Button (Clearable)

When using a clear button, use a div with role="combobox" instead of a nested button:

<div class="tree-select">
  <div class="tree-select-trigger" role="combobox" aria-expanded="false" tabindex="0">
    <span class="tree-select-value tree-select-value-selected">
      <span class="tree-select-path">Selected Item</span>
    </span>
    <button type="button" class="tree-select-clear" aria-label="Clear selection">
      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>
    <svg class="tree-select-arrow">...</svg>
  </div>
  <div class="tree-select-dropdown" id="dropdown-id" popover="auto">...</div>
</div>

Color Variants

Color Variants

Ghost Variant

Ghost Tree Select