Accordion
Expandable sections with smooth animation. Supports single or multiple open items.
Install
Import path
Examples
Demo
A vertically stacked set of interactive headings that each reveal a section of content.
Basic
A basic accordion that shows one item at a time. The first item is open by default.
Multiple
Use type=multiple to allow multiple items to be open at the same time.
Disabled
Use the disabled prop on AccordionItem to disable individual items.
Borders
Add borders to the Accordion and items for a more defined separation.
Card
Wrap the Accordion in a Card component.
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import {
Accordion, AccordionItem, AccordionTrigger, AccordionContent,
} from "@codefast/ui/accordion";
<Accordion type="single" collapsible>
<AccordionItem value="a">
<AccordionTrigger>…</AccordionTrigger>
<AccordionContent>…</AccordionContent>
</AccordionItem>
</Accordion>
API reference
Props for each part of the component. All native element props are also forwarded.
Accordion
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "single" | "multiple" | — | Whether one or many items can be open. |
| collapsible | boolean | false | For type=single, allow closing the open item. Ignored for multiple. |
| value / defaultValue | string | string[] | — | Controlled / uncontrolled open item(s). |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
| Key | Function |
|---|---|
| Tab | Moves focus to the next trigger. |
| Enter | Toggles the focused panel. |
| Space | Toggles the focused panel. |
| Arrow+Down | Moves focus to the next trigger. |
| Arrow+Up | Moves focus to the previous trigger. |
- Each trigger is a button with aria-expanded and aria-controls set automatically.
- Panels are linked back to their trigger via aria-labelledby.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Use for FAQs and progressively-disclosed settings.
- Keep trigger labels scannable and self-explanatory.
Don’t
- Don’t hide content the user needs to see at a glance.
- Don’t nest accordions deeply — it gets hard to track state.