Components / data-display
Accordion
A header that shows or hides a panel of related content.
import { Accordion } from '@basiiik/ui';
The snippet an agent gets
From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.
import { Accordion } from '@basiiik/ui';
<Accordion title="Shipping">Orders ship within two working days.</Accordion>- Example values were filled in for the required prop title: replace them with your own.
- Hover and Focused are CSS. Expanded is
expanded/defaultExpandedwithonExpandedChange. Disabled uses the disabled attribute. - Storybook: Data display/Accordion.
Props
| Prop | Type | Notes |
|---|---|---|
expanded | boolean | |
title required | ReactNode | |
children | native attribute | |
disabled | boolean |
Other props
| Prop | Type | What it does |
|---|---|---|
headingLevel | 2 | 3 | 4 | 5 | 6 | Heading level of the header, so the page outline stays correct. Default 3. |
defaultExpanded | boolean | Initial state when uncontrolled. |
onExpandedChange | (expanded: boolean) => void |
States. Hover and Focused are CSS. Expanded is expanded / defaultExpanded with onExpandedChange. Disabled uses the disabled attribute.
Native attributes such as className, id and data-* are forwarded to the root element.
Use it when
- FAQs and progressive disclosure of secondary detail
Do not use it when
- Primary content that everyone needs
Rules for agents
- Stack several Accordions for a group; each one is a heading with a button and a labelled region
- Set headingLevel so the headers fit the page outline (default 3)
- Start collapsed unless the first section is what most people need (defaultExpanded)
- Keep each title short and specific so people can scan the headers
Avoid
- Hiding content everyone needs, such as required instructions or errors, inside a collapsed Accordion
- A single Accordion holding the whole page
- Nesting Accordions inside Accordions
- Using Accordions to switch between views (use Tabs)
- Interactive controls inside the header
Writing the content
- Titles are questions or topics: 'How do refunds work?', 'Shipping'
- Use sentence case
Keyboard
- Enter and Space toggle
- Tab moves between headers
Accessibility
- aria-expanded and aria-controls on the header button
- Panel: role="region" aria-labelledby the header
Colour tokens it reads
color.bg.subtlecolor.border.focuscolor.border.subtlecolor.icon.disabledcolor.icon.secondarycolor.text.disabledcolor.text.primarycolor.text.secondaryRelated
data-display 8 Figma variants Try it in the live demo