Accordion Preview

An accordion groups sections of related content that can be opened and closed.

Accordions decrease cognitive load by letting people choose which sections of content they see, like questions in an FAQ. Never put information that's required for the current task inside an accordion. Consider a treatment that gives it more prominence.




Closed by default

By default, accordion items are closed. You can specify if any of the items should be open by default using defaultOpenItems.

Closed by default

Multiple open items

Accordion items automatically close when another is opened. To allow multiple accordions to be open at once, use the multiple prop.

Multiple open items


The chevron icon signifies additional content and indicates an accordion item’s interaction. The chevron can be either at the start or the end of the header. Be consistent with the icon placement within an experience.

Arrow icon position correct
Arrow icon position incorrect


Accordion headers have a button role that makes them perceivable to assistive technologies. When an accordion item is open, its aria-expanded and active properties should be set to true.


An accordion header should give an idea of the content in the accordion panel. Keep headers brief. By default, header content wraps onto the next line at smaller widths and multiple lines of text could hinder scannability.

Accordion title example

Use sentence-style capitalization—only capitalize the first word. For more info, see Capitalization in the Microsoft Writing Style Guide.

Don’t use periods at the end of titles. For more info, see Periods in the Microsoft Writing Style Guide.