Behavior comparison
Choose Accordion for: Organizing FAQ answers or optional detail sections. Choose Segmented control for: Switching between a few compact display modes.
| Dimension | AccordionAccordion | Segmented controlSegmented control |
|---|---|---|
| Trigger | Click, tap, Enter, or Space on a section heading button. | Click or tap one compact segment. |
| Modality | Non-modal disclosure inside the document flow. | Non-modal exclusive control for an immediate view or filter change. |
| Placement | Vertically stacked headings with each panel directly following its control. | A short single row of adjacent options within the affected view. |
| Interactivity | One or several content panels expand and collapse without changing page context. | Exactly one segment is active and selecting another updates the view immediately. |
| Focus | Focus remains on the header button when its panel opens or closes. | The group is one tab stop after selection, with a visible focus indicator distinct from selected state. |
| Dismissal | Each expanded panel closes by activating its own header when the product allows collapse. | Not applicable: choosing another segment replaces the selected value. |
| Accessible role | heading containing button with aria-expanded and controlled region | radiogroup with radio options |
| Use case | Organizing FAQ answers or optional detail sections | Switching between a few compact display modes |
| Mobile behavior | Use full-width heading buttons and preserve the reading position as panels change height. | Limit it to a few short options; use tabs or a select before labels overflow. |