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.
Choice criteria, links and sources
- AccordionChoose Accordion if the user opens optional detail sections, like FAQ answers, and may leave several open.Open entry Accordion
- Segmented controlChoose Segmented control if the user switches a compact setting or display mode among two to five values.Open entry Segmented control
See the nine dimensionsSee the sources
Change view or reveal content
Try it
Should the control switch views, choose a compact mode, or reveal content in the flow?
Accordion
Shared trial context
A project workspace reveals related content in place while preserving the user's position on the page.
Accordion
Mission
Accordion
Expand Refunds, move to Payment methods with keyboard, open it, and collapse Refunds again.
Essential information, always open
This answer must remain visible to complete the process.
Step 1 of 3
Try
Try the component. Your live result appears just above. Move on at your own pace.
Behavior and edge case
- What to observe
- The expanded header exposes its state and the answer appears immediately after it.
- Edge case
- A mandatory open section cannot be collapsed and communicates that rule without presenting a false control.
Segmented control
Mission
Segmented control
Choose Compact with pointer, then Dense with arrows, and verify only one value remains selected.
- Brief.pdf
- Budget.xlsx
- Notes.txt
Step 1 of 3
Try
Try the component. Your live result appears just above. Move on at your own pace.
Behavior and edge case
- What to observe
- A single display density is active. Its selected segment and the content spacing stay in sync.
- Edge case
- When labels no longer fit without clipping, the interface uses a more suitable single-value control such as Select.
What this example shows
Accordion reveals sections beneath their headings; Tabs swaps one peer panel, while Segmented control selects one compact value.
Which fits your need?
Accordion
Organizing FAQ answers or optional detail sections
Segmented control
Switching between a few compact display modes
Difference and sources
Accordion reveals sections beneath their headings; Tabs swaps one peer panel, while Segmented control selects one compact value.
Read the sourcesParts of the specimen
Select a numbered marker on the schematic, or use the list below, to see its role. The schematic shows the concept's representative state.
Heading
A meaningful heading that introduces the message or disclosure.
Decision
Family question
Should the control switch views, choose a compact mode, or reveal content in the flow?
Three criteria to choose
- Interactivity
Accordion
One or several content panels expand and collapse without changing page context.
Segmented control
Exactly one segment is active and selecting another updates the view immediately.
- Placement
Accordion
Vertically stacked headings with each panel directly following its control.
Segmented control
A short single row of adjacent options within the affected view.
- Focus
Accordion
Focus remains on the header button when its panel opens or closes.
Segmented control
The group is one tab stop after selection, with a visible focus indicator distinct from selected state.
Nine dimensions
- Trigger
Accordion
Click, tap, Enter, or Space on a section heading button.
Segmented control
Click or tap one compact segment.
- Modality
Accordion
Non-modal disclosure inside the document flow.
Segmented control
Non-modal exclusive control for an immediate view or filter change.
- Placement
Accordion
Vertically stacked headings with each panel directly following its control.
Segmented control
A short single row of adjacent options within the affected view.
- Interactivity
Accordion
One or several content panels expand and collapse without changing page context.
Segmented control
Exactly one segment is active and selecting another updates the view immediately.
- Focus
Accordion
Focus remains on the header button when its panel opens or closes.
Segmented control
The group is one tab stop after selection, with a visible focus indicator distinct from selected state.
- Dismissal
Accordion
Each expanded panel closes by activating its own header when the product allows collapse.
Segmented control
Not applicable: choosing another segment replaces the selected value.
- Accessible role
Accordion
heading > button[aria-expanded][aria-controls] + region
Segmented control
radiogroup > radio
- Use case
Accordion
Organizing FAQ answers or optional detail sections
Segmented control
Switching between a few compact display modes
- Mobile behavior
Accordion
Use full-width heading buttons and preserve the reading position as panels change height.
Segmented control
Limit it to a few short options; use tabs or a select before labels overflow.
| 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. |