- React
- HTML

## Examples

### Single selectable

### Multiselectable

A tree view can be setup to allow multiple nodes to be selected. When a tree view is intended to allow multiple selection, `aria-multiselectable="true"` must be passed to the root `ul[role="tree"]` element.

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

### With checkboxes

### With icons

### With badges

### With action item

### With non-expandable top level nodes

### With selectable, expandable nodes

### Guides

### Compact

### Compact, no background

## Documentation

### Usage

Class | Applied | Outcome
--- | --- | ---
`.pf-v6-c-tree-view` | `<div>` | Initiates the tree view container. Required
`.pf-v6-c-tree-view__list` | `<ul>` | Initiates a tree view list. Required
`.pf-v6-c-tree-view__list-item` | `<li>` | Initiates a tree view list item. Required
`.pf-v6-c-tree-view__content` | `<div>` | Initiates a tree view node. Required
`.pf-v6-c-tree-view__node` | `<button>`, `<label>` | Initiates a tree view node. Required
`.pf-v6-c-tree-view__node-container` | `<span>` | Initiates a tree view node container. Required for compact variant
`.pf-v6-c-tree-view__node-content` | `<span>` | Initiates a tree view node content container used to stack elements.
`.pf-v6-c-tree-view__node-count` | `<span>` | Initiates a tree view node count.
`.pf-v6-c-tree-view__node-toggle` | `<span>`, `<button>` | Initiates a tree view toggle.
`.pf-v6-c-tree-view__node-toggle-icon` | `<span>` | Initiates a tree view toggle icon.
`.pf-v6-c-tree-view__node-title` | `<span>` | Initiates a tree view node title.
`.pf-v6-c-tree-view__node-text` | `<span>`, `<button>` | Initiates tree view text. Note: Use a `<button>` when the node is expandable and selectable.
`.pf-v6-c-tree-view__node-icon` | `<span>` | Initiates a tree view icon.
`.pf-v6-c-tree-view__node-check` | `<span>` | Initiates a tree view check.
`.pf-v6-c-tree-view__action` | `<div>` | Initiates a tree view action wrapper.
`.pf-v6-c-tree-view__search` | `<div>` | Initiates a tree view search wrapper.
`.pf-m-guides` | `.pf-v6-c-tree-view` | Modifies the tree view to the guides presentation.
`.pf-m-compact` | `.pf-v6-c-tree-view` | Modifies the tree view to the compact presentation.
`.pf-m-no-background` | `.pf-v6-c-tree-view.pf-m-compact` | Modifies the tree view compact variant node containers to have a transparent background.
`.pf-m-current` | `.pf-v6-c-tree-view__node` | Modifies the tree view node to be current.
`.pf-m-selectable` | `.pf-v6-c-tree-view__node` | For use on nodes that are expandable and selectable, when the default click action on the node selects it instead of expanding it.
`.pf-m-truncate` | `.pf-v6-c-tree-view`, `.pf-v6-c-tree-view__node-title`, `.pf-v6-c-tree-view__node-text` | Modifies the tree view title or text to truncate.

##
CSS variables