Tree: Disabled
A disabled item can’t be selected, checked or opened, and the arrow keys skip it. Items inside a disabled branch are disabled too.
Team
roadmap.md
salaries.xlsx
notes.md
Archive
2024.zip
This adds the example as components/examples/tree/disabled.tsx, together with the Tree component and the HextaUI theme tokens it needs.
pnpm dlx shadcn@latest add https://hextaui.com/r/tree-disabled.jsonTo add only the component, follow the Tree installation.
Props in this example
The Tree props this example sets, from the API reference.
| Prop | Type | Default |
|---|---|---|
defaultExpandedValues | string[] | – |
| Prop | Type | Default |
|---|---|---|
valueRequired. Unique within the tree. | string | – |
disabled | boolean | false |
| Prop | Type | Default |
|---|---|---|
iconShown before the label. | ReactNode | – |
Every prop is in the Tree API reference.
- Indent guides
- Connectors
- Checkboxes
- Navigation
- Multiple selection
- Controlled
- Lazy loading
- Small
- Long names
- Right to left
See them all, with keyboard support and accessibility notes, on the Tree page.
- CheckboxA checkbox whose check draws in, with indeterminate parents, groups and labels that share its hover.
- AvatarUser photos with an initials fallback, status badges and stacked groups that collapse into a count.
- BadgeStatus labels with colored dots, removable tags that slide closed and counts that roll to their new value.
- CardA surface for grouping content, with three variants, edge-to-edge media, concentric radii and whole-card links.
- ChartRecharts charts with themed colors, a tooltip and legend that read labels from one config, and keyboard navigation with a visible focus ring.
- Data tableA table for real data, with sorting, search, row selection, pinned columns, a sticky header and pagination.