Tree

A list that admits it has depth — and pays for it, so it has to be the clinician's own mental model.

Overview

A tree earns its complexity only when the hierarchy is one the clinician already thinks in. Otherwise it costs two presses to reach every leaf and hides the size of the set behind a triangle. It is not a variant of a List: it carries its own expansion state, its own traversal, and one rule a flat list never needs — that a closed branch has to say what is inside it.

Tree

A tree is a list that admits it has depth. It earns its complexity only when the hierarchy is the clinician's own mental model; otherwise it costs two clicks to reach every leaf and hides the set size behind a triangle.

• Three levels maximum. Past that, the indentation stops being readable and the path stops being memorable. Flatten, or move to a breadcrumb plus a list.
• Branches report their contents — a count, and any state inside them at advisory priority or above.
• Expansion state is remembered per session, not reset on every navigation. Re-collapsing a branch the clinician opened is a small, repeated theft of attention.
• Never auto-collapse a branch the user opened when a sibling is expanded. Accordion behaviour in a tree loses work.
• A branch is never the only route to its leaves. Search reaches every leaf regardless of expansion state, and expands the path to what it finds.

What a closed branch owes the reader

• A triangle is not a summary. The reader cannot tell an empty branch from one holding a critical result, and the only way to find out is to open every one — which is the work the tree was supposed to save.
• Expansion state is the reader's, and it is not inherited. A tree that opens where the last clinician left it presents someone else's reading of the record as the shape of it. On a shared workstation it is reset with the session.
• Depth is bounded. Past two levels inside a context, “where am I” stops being answerable from the screen — the same bound as Navigation.
• Closed is hidden from view, not from search. A branch behind a plain hidden is invisible to Ctrl + F, so the browser reports no match and a clinician searching the record for a drug name is told it is not there. The group uses hidden="until-found" and opens itself on beforematch, so the control’s state and the revealed content agree. This was plain hidden until the interaction gate was pointed at it — the same defect Tabs had, on a page that already cited that rule.
• Nothing that must not be missed lives in a closed branch. An active alarm renders in the docked region regardless of what is open, exactly as it does for Tabs. Concealment is what both components are for, which is why both need the same rule.

What the component enforces, and what it only asks for

One rule is held here and it is the one the component exists for; the rest is the shape of the data you pass.

Do's and don'ts

Accessibility

• A real tree role with treeitem children, or nested lists with aria-expanded on the branches. A div with a rotating triangle is a picture of a tree.
• Arrow keys traverse and expand — right opens, left closes or moves to the parent — which is what makes depth navigable without a pointer.
• A branch announces its state and its count, so a screen-reader user gets what the summary line gives a sighted one.
• Only one tab stop. A tree of forty nodes must not cost forty tab presses to pass.

Outcomes of use

• Effectiveness — the clinician can tell what is inside a branch without opening it, which is the only reason to close one.
• Efficiency — fewer presses than a flat list, which is the entire justification for the extra structure.
• Satisfaction — a shape that matches how the record is actually organised. Attributes believed to contribute to an outcome; the outcome is settled by observing real use, not by this page — see Usability & context of use.

Clinical safety notes

• A closed branch declares the count and the highest priority inside it. (the component declares it; the count is you) Mitigates: a critical result one press away with nothing on screen saying it is there.
• No alarm renders only inside a branch. (you) Mitigates: an alarm concealed by a collapsed node.
• Expansion state does not survive a user switch. (you) Mitigates: one clinician's reading of a record presented to the next as the record's own shape.

Implementation

$ npx shadcn@latest add https://md.notjustany.tech/r/tree.json

<Tree label="Encounter · 13 Aug 2026">
  <TreeItem label="ECG" summary="2 recordings, 1 critical">
    // the summary is required: a closed branch has to say what is in it
  </TreeItem>
</Tree>

Related

• List — the flat case, and where selection and counts are argued.
• Tabs — the same rule about what may never be concealed.
• Accordion — one level of the same idea, built on the platform's own element.