## Examples

### Single selectable


import TreeViewSingleSelectable from "./TreeViewSingleSelectable.tsx?raw"

<LiveExample src={TreeViewSingleSelectable} />

### Multiselectable

A tree view can be setup to allow multiple nodes to be selected. When a tree view is intended to allow multiple selection, the `isMultiSelectable` property must be passed.


import TreeViewMultiselectable from "./TreeViewMultiselectable.tsx?raw"

<LiveExample src={TreeViewMultiselectable} />

### With separate selection and expansion

The `hasSelectableNodes` modifier will separate the expansion and selection behaviors, allowing a parent node to be selected or deselected without toggling its expansion.


import TreeViewSelectionExpansion from "./TreeViewSelectionExpansion.tsx?raw"

<LiveExample src={TreeViewSelectionExpansion} />

### With search

A search input can be used to filter tree view items. It is recommended that a tree view with more than 7 nodes includes a search input.


import TreeViewWithSearch from "./TreeViewWithSearch.tsx?raw"

<LiveExample src={TreeViewWithSearch} />

### With checkboxes


import TreeViewWithCheckboxes from "./TreeViewWithCheckboxes.tsx?raw"

<LiveExample src={TreeViewWithCheckboxes} />

### With icons


import TreeViewWithIcons from "./TreeViewWithIcons.tsx?raw"

<LiveExample src={TreeViewWithIcons} />

### With unique icon per item


import TreeViewWithIconPerItem from "./TreeViewWithIconPerItem.tsx?raw"

<LiveExample src={TreeViewWithIconPerItem} />

### With badges


import TreeViewWithBadges from "./TreeViewWithBadges.tsx?raw"

<LiveExample src={TreeViewWithBadges} />

### With custom badges


import TreeViewWithCustomBadges from "./TreeViewWithCustomBadges.tsx?raw"

<LiveExample src={TreeViewWithCustomBadges} />

### With action items


import TreeViewWithActionItems from "./TreeViewWithActionItems.tsx?raw"

<LiveExample src={TreeViewWithActionItems} />

### Guides


import TreeViewGuides from "./TreeViewGuides.tsx?raw"

<LiveExample src={TreeViewGuides} />

### Compact


import TreeViewCompact from "./TreeViewCompact.tsx?raw"

<LiveExample src={TreeViewCompact} />

### Compact, no background


import TreeViewCompactNoBackground from "./TreeViewCompactNoBackground.tsx?raw"

<LiveExample src={TreeViewCompactNoBackground} />

### With memoization

Turning on memoization with the `useMemo` property helps prevent unnecessary re-renders for large data sets. With this flag active, `activeItems` must pass in an array of nodes along the selected item's path to update properly.


import TreeViewWithMemoization from "./TreeViewWithMemoization.tsx?raw"

<LiveExample src={TreeViewWithMemoization} />