DropDownTree

Select-style trigger that opens a tree picker for choosing from a hierarchical taxonomy.

DropDownTree is a select-style field whose popover holds an expandable tree, for picking a single node out of a hierarchy — categories, org charts, file folders, or any nested taxonomy. Pass nodes as TreeNodes (id, label, optional icon and children); it is controlled by the selected node id. Pre-expand branches with defaultExpandedIds, and set leafOnly to allow selecting only leaf nodes.

Example

Preview

Team

import { DropDownTree } from '@officina/ui';
import { useState } from 'react';

function CategoryPicker() {
  const [value, setValue] = useState<string | undefined>();
  return (
    <DropDownTree
      value={value}
      onChange={setValue}
      placeholder="Choose a category"
      defaultExpandedIds={['electronics']}
      nodes={[
        {
          id: 'electronics',
          label: 'Electronics',
          children: [
            { id: 'phones', label: 'Phones' },
            { id: 'laptops', label: 'Laptops' },
          ],
        },
      ]}
    />
  );
}

API

Prop	Type	Default	Description
nodes*	TreeNode[]	—	Hierarchical tree nodes to choose from.
onChange*	(id: string \| undefined) => void	—	Called with the newly selected node id.
value*	string \| undefined	—	Id of the selected node, or `undefined` when empty (controlled).
defaultExpandedIds	string[]	[]	Ids of branches expanded on first render.
label	string	—	Field label shown above the control.
leafOnly	boolean	false	Only allow selecting leaf nodes (no children).
placeholder	string	Select…	Placeholder text when nothing is selected.

Example

API

On this page