A group of native disclosures that reveals supporting content in place. Accordion is the component; a single item is the collapse/disclosure use case, while repeated items can expand independently or share one native single-open group.
Tokens, framework-free component CSS, machine-readable contracts, brand slots, and the specimen are included.
Yes. Replace the canonical brand assets and update semantic roles so components inherit the new direction.
No JavaScript is required for disclosure state or keyboard activation because the reference uses native details and summary.
Single-open is the default: one document-group-unique name connects the items, while the quiet default hover lifts only the chevron.
Appearance changes only how adjacent items are grouped. Divided is the compact default, outlined turns every item into a discrete container, and bare uses spacing without drawing a boundary.
Update your display name, contact details, and profile image.
Manage your password, passkeys, and active sessions.
View invoices, update your payment method, and manage your subscription plan.
Each item owns border.default and radius.container; space.3 separates the single-open containers without changing their content inset.
Bare keeps the same single-open default, removes visible boundaries and extra group gap, and relies on primary headings plus chevrons for hierarchy.
| Appearance | Modifier | Boundary | Usage |
|---|---|---|---|
| Divided | — | Shared subtle hairlines | Compact continuous lists and dense reference content |
| Outlined | --outlined | Bordered, rounded items with gaps | Discrete settings, FAQ, or content groups that need stronger separation |
| Bare | --bare | No visible line or container | Spacious editorial compositions with clear surrounding hierarchy |
Expansion is a markup choice rather than a visual modifier. Single-open is the default: repeat one non-empty, document-group-unique name across siblings. Omit name when comparison requires multiple items to remain open.
| Expansion | Markup | Behavior | Usage |
|---|---|---|---|
| Single | details name="billing-faq" | Opening one item closes its named sibling | Default for FAQs, settings, and compact progressive disclosure |
| Multiple | details | Any number of items may remain open | Use when users need to compare or scan expanded content |
For evaluating the system and building a small personal project.
For shared product work with team-level access and governance.
For organization-wide controls, support, and deployment requirements.
Omitting name opts into multiple-open behavior, so related answers can remain visible for comparison without specimen JavaScript.
Disclosure is useful only when hiding the content does not hide the task.
| Verdict | Rule |
|---|---|
| Do | Use Accordion for supporting content that can be understood from concise labels and revealed in place; keep essential instructions, errors, and primary page content visible. |
| Do | Use one Accordion item for a single collapse/disclosure control; keep Accordion as the canonical component name. |
| Do | Default to single-open with one document-group-unique name; omit it when users need to compare expanded content. |
| Do | Choose divided for compact lists, outlined for distinct item containers, and bare for low-chrome compositions; appearance does not change behavior. |
| Do | Keep summary labels short and unique, and put links, controls, badges, or changing content inside the expanded content region. |
| Don’t | Add redundant ARIA disclosure state to native details/summary or replace their behavior with specimen scripting. |
| Don’t | Nest disclosure items, hide essential content, or put secondary actions inside the summary row. |
| Don’t | Add a panel surface, width, or surrounding spacing to Accordion; its parent composition owns those concerns. |