A vertically stacked set of interactive headings, each revealing a section of content. Three published components, twelve variants, every state drawn.
Three components, twelve variants
Accordion - Variant: Basic · Border
Accordion / AccordionItem - Active × State: Off · On × Default · Hover · Focus · Disabled
Accordion / AccordionTrigger - Active: Off · On
Using the Accordion
When should I reach for an accordion?
When a page carries more than a reader needs at once and the parts are genuinely independent - an FAQ, a settings group, a long specification. If the sections have to be read in order, use headings and let the page scroll instead.
Which variant do I use?
Basic when the accordion sits inside a card or a panel that already has an edge. Border when it stands on its own on the page and each item needs its own container to read as separate.
Why does AccordionItem carry eight variants?
Two axes: Active is whether the item is open, State covers default, hover, focus and disabled. Two times four is eight, and every one of them is drawn because a design file has no pseudo-classes to fall back on.
How does it map to code?
One to one. Variant=Border becomes the bordered item class set, Active=On is the open state, and the padding and radius come from the same tokens the code reads.