Accordion

Accordion stacks related content into titled sections that operators open as needed. It lowers initial visual noise while keeping depth one click away—ideal for dispatch-center settings, incident inspector panels, and QA review frames where the operator occasionally needs many subtopics without scrolling through one long page. The mental model is "a tall column of labeled drawers," each standing alone as a coherent unit. Choose it when progressive disclosure matches scanning order; choose something else when users need to compare content across sections at the same time.

CAD field displays, protocol editors, supervisor preferences—panels with five or more related chunks where only a subset is relevant to a given task benefit from disclosure. Users expand only the sections they need.

Chat inspector rails, mobile-constrained layouts, and side drawers where a long scrolling form would bury everything benefit from stacked, collapsible sections.

Learning flows and reference material often match accordion's pacing: read a heading, decide whether to go deeper, continue. It supports the way operators actually learn a product mid-shift.

Use Collapsible. An accordion with one item is just a collapsible with extra chrome.

Use Sidebar or TabNav. Accordion implies "related sub-content," not "different destinations."

Do not hide required fields inside collapsed sections. If every field must be seen before submit, use a flat form and anchor links, not disclosure.

Use Tabs when the mental model is "peer sections you switch between," not "a tall list you scan top to bottom."

Each AccordionItem pairs a trigger with the content it discloses. The trigger is a button with a chevron that rotates to indicate state; the content region is the disclosed body. Keep triggers short and unambiguous—operators should be able to predict the content before expanding.

Do

Don't