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 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

ClassDescription
.tree-selectBase container (required)
.tree-select-triggerTrigger button (use with popovertarget)
.tree-select-valueSelected value display
.tree-select-value-selectedHas selection state
.tree-select-pathPath breadcrumb display
.tree-select-arrowDropdown arrow icon
.tree-select-clearClear selection button
.tree-select-dropdownDropdown container (use with popover attribute)
.tree-select-searchSearch input container
.tree-select-search-inputSearch input field
.tree-select-optionsOptions container
.tree-select-nodeTree node
.tree-select-node-expandedExpanded node
.tree-select-node-leafLeaf node (no children)
.tree-select-node-selectedSelected node
.tree-select-node-toggleExpand/collapse toggle
.tree-select-node-iconToggle icon
.tree-select-node-labelNode label text
.tree-select-node-custom-iconCustom node icon
.tree-select-childrenChild nodes container
.tree-select-checkboxCheckbox for multi-select
.tree-select-outlinedOutlined variant
.tree-select-filledFilled variant
.tree-select-smSmall size
.tree-select-lgLarge size
.tree-select-multipleMultiple selection mode
.tree-select-errorError state
.tree-select-disabledDisabled state
.tree-select-loadingLoading state
.tree-select-spinnerLoading 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>