Behavior comparison

Accordion vs Segmented control

Decisive difference

Accordion reveals or hides content sections under their headings; Segmented control picks one value from a small set and shows no content of its own.

AccordionChoose Accordion if the user opens optional detail sections, like FAQ answers, and may leave several open.
Segmented controlChoose Segmented control if the user switches a compact setting or display mode among two to five values.

Decision

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

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.

Accordion vs Segmented control

Accordion reveals or hides content sections under their headings; Segmented control picks one value from a small set and shows no content of its own.

AccordionChoose Accordion if the user opens optional detail sections, like FAQ answers, and may leave several open.
Segmented controlChoose Segmented control if the user switches a compact setting or display mode among two to five values.

Nine dimensions

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.