UI
← Home

Tree

A tree view with hierarchical keyboard navigation, and the four things a tree is asked to be. Arrow Up/Down move through the visible items; ArrowRight expands a parent then steps into its first child; ArrowLeft collapses or steps out to the parent; each item reports its depth (aria-level) and its position among its siblings. Selection is a mode: one node, several (`aria-multiselectable`), or tri-state checkboxes that cascade down a subtree (`aria-checked`) — and nodes can be re-ordered and re-parented by drag or by grab-and-move.

  • Axe
  • Name
  • Roving
  • Focus
  • Select
  • Copy
  • Drag
  • Cancel
  • Restore
  • Reorder
  • Open

Preview

  • Documents
    • Report.pdf

Installation

npx shadcn@latest add https://ui.publictheta.com/r/tree.json

Modes

Selection, checkboxes and reordering are modes of this one component — the roles, the group structure and the key model are identical in each. It expresses what were previously the tree-multiselect, check-tree and tree-reorder components, and the combinations none of them could.

selectionMode="multiple"
  • Documents
    • Report.pdf
selectionMode="checkbox"
  • Documents
    • Report.pdf
    • Photos
      • Beach.jpg
  • Music
    • Song.mp3
reorderable
  • Documents
    • Report.pdf
    • Photos
      • Beach.jpg
  • Music
    • Song.mp3

Conformance

Verified against the @publictheta/ui-spec tree specification on both the React and vanilla reference implementations, across Chromium, Firefox, and WebKit.

  • Axe — No WCAG 2 A/AA axe-core violations
  • Name — The widget container exposes an accessible name
  • Roving — Exactly one tab stop; Arrow keys move within the widget
  • Focus — A visible focus indicator appears on keyboard focus (WCAG 2.4.7)
  • Select — The file-manager selection model: Cmd/Ctrl-click toggles, Shift-click extends from the anchor, Cmd/Ctrl+A selects all and again clears, Escape clears, and the count is announced
  • Copy — Cmd/Ctrl+C puts what is selected on the clipboard in every flavour the widget promises — and a touch device, which has no command key, can do the same thing with a control
  • Drag — Pointer-drag surfaces don't select text or hijack touch scrolling
  • Cancel — Escape mid-drag (and pointercancel, when the OS takes the gesture) restores the value the drag started from and ends it, so the release commits nothing
  • Restore — What the user set is still there after a reload — the pane size, the column widths, the open section, the active tab, the scroll position — but only where the host opted in, and never at the cost of working when storage is unavailable
  • Reorder — An item can be moved somewhere else by pointer and by keyboard — Space/Enter grabs, the arrows move, Space/Enter drops, Escape puts it back — with an indicator showing where it would land and every step announced
  • Open — Enter, or a double click, opens the item and says which — and a plain click only selects it, which is the other half of the guarantee

See the full conformance matrix across all components.