Behavior comparison

Accordion vs Segmented control

Choose Accordion for: Organizing FAQ answers or optional detail sections. Choose Segmented control for: Switching between a few compact display modes.

Decision

Family question

Should the control switch views, choose a compact mode, or reveal content in the flow?

Rule for this pair

Choose Accordion when Accordion reveals sections beneath their headings; Tabs swaps one peer panel, while Segmented control selects one compact value. Choose Segmented control when Segmented control selects one value; Tabs selects a content panel, while Accordion expands or collapses sections independently.

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 > button[aria-expanded][aria-controls] + region	radiogroup > radio
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.

Try Accordion Try Segmented control