Accordion
Stacks a few sections so people open one answer at a time.
Examples
Each purchase rounds up to the next dollar. You see the round-up before it moves, and you can turn it off at any time.
$500 a day. Change it any time.
Multiple
- Instant, $1.50. Standard is free.
falsedefault
- Instant, $1.50. Standard is free.In minutes, or by tomorrow.
true
States
closed
hover
focus
- Up to the next dollar.
open
disabled
Usage
When to use it
- Use
- Questions and answers, where most visitors read one.
- Use
- A settings page with a few groups of controls.
- Use
- Help text that would crowd a form if all of it were open.
- Not for
- The reasons behind something the assistant asks to do. Use Approval request.
- Not for
- The person switches between views of the same content. Use Tabs.
- Not for
- Every visitor must read the content. Show it open.
Rules
8 rules
- Must
- Give every AccordionItem a unique value; defaultValue is an array of the values that start open. Because defaultValue matches items by value, so a plain string or a missing value opens nothing.
- Should
- Write each heading as the question the person has, in sentence case.
- Should
- Open the answer most visitors read with defaultValue.
- Should
- Answer in one to three sentences and link out for more.
- Never
- Nest an Accordion in a panel; use one Accordion with more items. Because a second stack of hairlines and chevrons inside a panel hides which heading owns which answer.
- Should
- Group or split an accordion that passes about eight items.
- Must
- Use Collapsible for a single section; an Accordion with one item is a Collapsible. Because one item still needs a value and an array defaultValue that Collapsible does without.
- Should
- Set multiple when the person compares two answers; leave it off to keep one open.
Accessibility
4 checks
- Each trigger sits in a heading element; check the level fits the page outline.
- Enter and Space toggle; Arrow Up and Down, Home and End move between headings.
- The trigger carries aria-expanded and aria-controls; the panel is a region named by its trigger.
- Focus shows a 2px olive outline on :focus-visible. Hover underlines the heading.
Edge cases
7 edge cases
- Long heading
- Wraps inside the trigger and the caret stays at the end. A long unbroken string overflows.
- Narrow to 120px
- Headings and panel text wrap; nothing clips.
- Right to left
- Headings align to the start and the caret moves to the left.
- Empty panel
- Opens a 16px empty space. A heading with no text is an unnamed button.
- Rapid presses
- The height animation reverses from where it is, with no jump.
- Reduced motion
- The panel and caret change at once.
- Forced colors
- Separators are 1px borders and the caret takes currentColor.
API
4 props
Accordion.multiplebooleandefaultfalseAccordion.defaultValuestring[]default[]AccordionItem.valuestringAccordionItem.disabledbooleandefaultfalse
Tokens
11 tokens
--line- #e6e4df
--fg- #0f0f0d
--fg-2- #4a4943
--fg-3- #6b6a63
--text-base- 16px
--text-sm- 14px
--weight-medium- 500
--radius-md- 10px
--dur-base- 200ms
--dur-fast- 140ms
--ease-out- cubic-bezier(0.16, 1, 0.3, 1)