i

Tree view

Organising content · researched

A hierarchical list of nodes that expand and collapse, with selectable leaves.

organism

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

Tree native: no antd 6.6.5
Variants
—
Sizes
—
States documented
disabled
Accessibility guidance
no

Divs/spans with role=tree and treeitem (rc-tree); no native tree element exists. Also checkable, draggable, virtualised; DirectoryTree variant.

docs ↗ · code ↗

Carbon

Tree view native: no @carbon/react 1.117.0
Variants
—
Sizes
small, extra small
States documented
—
Accessibility guidance
yes

Nodes are elements carrying role=tree, treeitem and group; there is no native tree element. Docs show node states as an image only, so none listed.

1 corrected on re-read
  • urls: {"docs_url":"https://carbondesignsystem.com/components/tree-view/usage/","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/TreeView"} → {"docs_url":"https://www.carbondesignsystem.com/building-blocks/core/components/tree-view/guidelines","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/TreeView"} curl -L: HTTP 200 for both; docs_url redirects to this final URL

docs ↗ · code ↗

GOV.UK

absentGOV.UK does not ship this component. Nothing is drawn in its place.

Checked the Components index (https://design-system.service.gov.uk/components/), the Patterns index (https://design-system.service.gov.uk/patterns/), the Styles index (https://design-system.service.gov.uk/styles/) and the repo components directory (alphagov/govuk-frontend packages/govuk-frontend/src/govuk/components, plus installed 6.5.1 dist). No tree or expandable nested list; Accordion and Details are flat.

Material Web

absentMaterial Web does not ship this component. Nothing is drawn in its place.

Checked docs/components (22 files: button, checkbox, chip, dialog, divider, elevation, fab, focus-ring, icon-button, icon, list, menu, progress, radio, ripple, select, slider, switch, tabs, text-field), the repo top-level and labs directories, and docs/roadmap.md. No tree component and no roadmap entry.

Primer

TreeView native: no @primer/react 38.40.1
Variants
—
Sizes
—
States documented
default, loading, error
Accessibility guidance
yes

Renders ul/li with role=tree, treeitem and group. Async subtrees document initial, loading, done and error states.

docs ↗ · code ↗

Spectrum

Tree view native: no
shipped, not drawn hereSpectrum documents this component, but it could not be drawn from the package used for the frames. The note below says why.
Variants
—
Sizes
S, M, L, XL
States documented
default, hover, focus, active, disabled
Accessibility guidance
yes

Sizes read from the rsp option-details text; no SWC 1st-gen or 2nd-gen tree exists (checked package and gen2 trees), though spectrum-css has treeview. Native check: S2 TreeView is React Aria Tree, divs with role=treegrid.

docs ↗ · code ↗

USWDS

absentUSWDS does not ship this component. Nothing is drawn in its place.

No tree view. Side navigation shows a nested hierarchy of links (one to three levels) but is not an expand/collapse widget. Checked the docs components index (47 components, v3.14.0), a text search of the fetched component pages, and the 88 entries of packages/ on the develop branch.

Platform facts

Native elementno elementNo HTML tree element. The spec details element is a disclosure widget and the spec says tab and menu widgets are not disclosure widgets; a tree is not mentioned there. APG: aria-expanded true/false on parent nodes only (end nodes have none), aria-multiselectable on the tree, aria-selected or aria-checked (not both) for selection, aria-level/aria-setsize/aria-posinset when nodes are not all in the DOM.
Baselinenone
APG patterntreeview
ARIA roletree
Shipped by4 of 7 systems

Anatomy

  1. tree — APG: element with role tree, with a visible label (aria-labelledby) or aria-label.
  2. treeitem — APG: each node has role treeitem. Terms used: node, root node, child node, end node, parent node, open/closed node.
  3. group optional — APG: each parent node contains or owns an element with role group that holds its child nodes.

Keys the APG binds

  • When a single-select tree receives focusIf none of the nodes are selected before the tree receives focus, focus is set on the first node.
  • When a single-select tree receives focusIf a node is selected before the tree receives focus, focus is set on the selected node.
  • When a multi-select tree receives focusIf none of the nodes are selected before the tree receives focus, focus is set on the first node.
  • When a multi-select tree receives focusIf one or more nodes are selected before the tree receives focus, focus is set on the first selected node.
  • Right arrowWhen focus is on a closed node, opens the node; focus does not move.
  • Right arrowWhen focus is on a open node, moves focus to the first child node.
  • Right arrowWhen focus is on an end node, does nothing.
  • Left arrowWhen focus is on an open node, closes the node.
  • Left arrowWhen focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
  • Left arrowWhen focus is on a root node that is also either an end node or a closed node, does nothing.
  • Down ArrowMoves focus to the next node that is focusable without opening or closing a node.
  • Up ArrowMoves focus to the previous node that is focusable without opening or closing a node.
  • HomeMoves focus to the first node in the tree without opening or closing a node.
  • EndMoves focus to the last node in the tree that is focusable without opening a node.
  • Enteractivates a node, i.e., performs its default action. For parent nodes, one possible default action is to open or close the node. In single-select trees where selection does not follow focus (see note below), the default action is typically to select the focused node.
  • Type a character (type-ahead is recommended for all trees, especially for trees with more than 7 root nodes)focus moves to the next node with a name that starts with the typed character.
  • Type multiple characters in rapid succession (type-ahead)focus moves to the next node with a name that starts with the string of characters typed.
  • * (Optional)Expands all siblings that are at the same level as the current node.
  • Multi-select, recommended model (no modifier key needed while moving focus). SpaceToggles the selection state of the focused node.
  • Multi-select, recommended model. Shift + Down Arrow (Optional)Moves focus to and toggles the selection state of the next node.
  • Multi-select, recommended model. Shift + Up Arrow (Optional)Moves focus to and toggles the selection state of the previous node.
  • Multi-select, recommended model. Shift + Space (Optional)Selects contiguous nodes from the most recently selected node to the current node.
  • Multi-select, recommended model. Control + Shift + Home (Optional)Selects the node with focus and all nodes up to the first node. Optionally, moves focus to the first node.
  • Multi-select, recommended model. Control + Shift + End (Optional)Selects the node with focus and all nodes down to the last node. Optionally, moves focus to the last node.
  • Multi-select, recommended model. Control + A (Optional)Selects all nodes in the tree. Optionally, if all nodes are selected, it can also unselect all nodes.
  • Multi-select, alternative model (moving focus without Shift or Control unselects all selected nodes except the focused node). Shift + Down ArrowMoves focus to and toggles the selection state of the next node.
  • Multi-select, alternative model. Shift + Up ArrowMoves focus to and toggles the selection state of the previous node.
  • Multi-select, alternative model. Control + Down ArrowWithout changing the selection state, moves focus to the next node.
  • Multi-select, alternative model. Control + Up ArrowWithout changing the selection state, moves focus to the previous node.
  • Multi-select, alternative model. Control + SpaceToggles the selection state of the focused node.
  • Multi-select, alternative model. Shift + Space (Optional)Selects contiguous nodes from the most recently selected node to the current node.
  • Multi-select, alternative model. Control + Shift + Home (Optional)Selects the node with focus and all nodes up to the first node. Optionally, moves focus to the first node.
  • Multi-select, alternative model. Control + Shift + End (Optional)Selects the node with focus and all nodes down to the last node. Optionally, moves focus to the last node.
  • Multi-select, alternative model. Control + A (Optional)Selects all nodes in the tree. Optionally, if all nodes are selected, it can also unselect all nodes.
  • Horizontally arranged nodesDown Arrow performs as Right Arrow is described above, and vice versa.
  • Horizontally arranged nodesUp Arrow performs as Left Arrow is described above, and vice versa.

The seven states

default Nodes visible; parent nodes collapsed (aria-expanded false) or open.
hover Pointer-only CSS state; not defined by APG or HTML (inference).
focus APG: focus on a node; first node, selected node, or first selected node when the tree receives focus.
active Mapping inference: APG has no 'active' state. It defines selected (aria-selected or aria-checked, distinct from focus) and open (aria-expanded=true).
disabled n/a — Not mentioned on the APG treeview page.
error n/a — Not defined.
loading n/a — APG mentions dynamic loading only as a reason for aria-level/setsize/posinset; no loading state.

Every cell was read twice, the second time from raw sources by a separate pass. 1 of 35 fields changed on the second read — open any “corrected” note to see what it said before.