Tree Select Example

Groups: none

Children: none

How to use this component

A hierarchical multi-select component that displays options in a tree structure with parent/child relationships. Supports search, expand/collapse, and multi-selection with badges.

Props

Name	Type	Default	Description
options *	TreeSelectOption[]	-	The hierarchical options to display in the tree.
selectedGroupIds *	string[]	-	IDs of the selected parent groups.
selectedChildIds *	string[]	-	IDs of the selected children.
onSelectionChange *	(groupIds: string[], childIds: string[]) => void	-	Callback fired when selection changes.
placeholder	string	"Select..."	Text displayed when nothing is selected.
searchPlaceholder	string	"Search..."	Placeholder text for the search input.
emptyMessage	string	"No results found."	Text displayed when search yields no results.
disabled	boolean	false	Whether the user can interact with the component.
className	string	-	Additional CSS classes for the trigger button.

TreeSelectOption type

type TreeSelectChild = {
  id: string
  text: string
}

type TreeSelectOption = {
  id: string
  text: string
  children?: TreeSelectChild[]
}

Playground

Import from @filigran/ui :

import {TreeSelect} from '@filigran/ui/clients'

Note: This playground shows the component structure. Since TreeSelect is a controlled component requiring useState, the interactive example above demonstrates full functionality.


  <TreeSelect
    options={[
      {
        id: 'fruits',
        text: 'Fruits',
        children: [
          { id: 'apple', text: 'Apple' },
          { id: 'banana', text: 'Banana' },
        ],
      },
      {
        id: 'vegetables',
        text: 'Vegetables',
        children: [
          { id: 'carrot', text: 'Carrot' },
          { id: 'broccoli', text: 'Broccoli' },
        ],
      },
    ]}
    selectedGroupIds={[]}
    selectedChildIds={[]}
    onSelectionChange={(groupIds, childIds) =>
      console.log('Selected:', groupIds, childIds)
    }
    placeholder="Select items..."
  />