Containers & Overlays
Accordion
Accordion is a set of stacked collapsible sections for progressive disclosure, built from Accordion Item building blocks.
Expansion mode (Single/Multiple) — implementation; Figma confirms Accordion Item collapsed/expanded states only
betaReact AvailableFigma AvailableDocs Partial
- React last updated
- 2026-07-11
- Documentation last updated
- 2026-06-01
- Accessibility target
- WCAG 2.2 AA (target)
- Version
- 0.5.0-beta
Known open questions
- Figma documents Accordion Item only — single vs multiple expansion is an implementation convention, not a separate Figma variant.
- Disabled accordion items, leading icons, and size variants are not confirmed in Figma.
- Arrow-key roving accordion pattern is intentionally not implemented.
Live preview
Single-mode accordion with collapsible behavior. Use keyboard Tab and Enter/Space on triggers.
Single + collapsible
Skrewww is a token-driven design system with Beta React components and server-rendered documentation.
No. Essential documentation must remain visible by default — Accordion is for optional secondary detail only.
Panels can contain paragraphs, lists, and other static content. This example includes enough text to verify padding and readable line length inside the expanded region without relying on icon rotation alone for state.
- Native button triggers
- aria-expanded and aria-controls
- hidden panels removed from interaction
Multiple expansion
type="multiple"
Both A and B can stay open simultaneously.
Toggle independently from section A.
Purpose
Stacked collapsible sections for progressive disclosure — FAQ lists, settings groups, and optional detail panels.
Anatomy
Accordion composes Accordion Item building blocks: Accordion + AccordionItem + AccordionTrigger + AccordionPanel.
Variants and states
single · multiple
When to use
Secondary information that benefits from being hidden by default and revealed on demand.
When not to use
Primary documentation, critical instructions, or content users must see immediately without an extra click.
Accessibility
Each header is a native button with aria-expanded and aria-controls. Panels use stable IDs and hidden when collapsed. Arrow-key roving is not implemented — Tab moves through triggers normally.
Keyboard behavior
Enter or Space toggles the focused trigger through native button activation. Tab moves through triggers normally. Arrow keys, Home, and End are not implemented.
Common mistakes
Hiding essential SEO documentation inside client-rendered collapsed panels, or making the entire row a single interactive target instead of a real button trigger.
Properties
Composed Accordion API built from Figma Accordion Item building blocks. Title and content per item. Chevron rotation and panel visibility match expanded state.
What is the difference between Accordion and Tabs?
Tabs switch mutually exclusive views with tablist semantics. Accordion expands inline sections within the same flow.
Can multiple Accordion items be open?
Yes when type="multiple". Default type="single" keeps one section open; collapsible allows closing all in single mode.
How does Accordion work with a keyboard?
Each trigger is a native button — Enter/Space toggles. Tab moves between triggers. No arrow-key roving is implemented.
When should content remain permanently visible?
Essential instructions, primary documentation, and SEO-critical content must not live only inside collapsed client-rendered panels.
Tokens used
semantic/border/defaultsemantic/text/primarysemantic/icon/mutedcomponent/radius/container
Component API
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "single" | "multiple" | "single" | Expansion mode. |
| value | string | string[] | — | Controlled open item(s). |
| defaultValue | string | string[] | — | Initial open item(s). |
| onValueChange | (value: string | string[]) => void | — | Called when expansion changes. |
| collapsible | boolean | false | Allow closing all items in single mode. |
React example
Copy React example
"use client";
import {
Accordion,
AccordionItem,
AccordionPanel,
AccordionTrigger,
} from "@/components/ui/Accordion";
export function Example() {
return (
<Accordion type="single" collapsible defaultValue="faq-1">
<AccordionItem value="faq-1">
<AccordionTrigger>What is Skrewww?</AccordionTrigger>
<AccordionPanel>A token-driven design system with Beta React components.</AccordionPanel>
</AccordionItem>
<AccordionItem value="faq-2">
<AccordionTrigger>Is Accordion for primary docs?</AccordionTrigger>
<AccordionPanel>No — keep essential documentation visible by default.</AccordionPanel>
</AccordionItem>
</Accordion>
);
}