Accordion
Collapsible sections — an FAQ, a long list of terms, a set of grouped filters.
import { Accordion, AccordionItem } from '@/components/ui/Accordion';Source: src/components/ui/Accordion.tsx
Examples
An FAQ
When does cashback appear?
Usually within 48 hours, as pending. It is confirmed once the store’s return window closes.
Why is my cashback lower than the advertised rate?
Rates vary by product category. The tier table on the store page lists each one.
Compact rows
size="sm" with weight="normal" is the dense variant — built for the phone navigation’s submenus, where a 60px row per category made the panel taller than the screen.
Default: 60px rows, bold
Roomy enough to be the main structure of a page.
size="sm" weight="normal": 44px rows
For a list inside another list.
Props
<Accordion> props
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | — | — |
Also accepts everything in HTMLAttributes<HTMLDivElement> — so native attributes (id, onClick, aria-*, data-*) pass straight through.
<AccordionItem> props
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | ReactNode | — | — |
defaultOpen | boolean | false | — |
padding | 'none' | 'md' | 'none' | Horizontal inset for the row's own content, matching `Card`'s `md`. Default `none` suits an accordion sitting among other content inside a padded Card — it shares that padding and lines up with its neighbours. Use `md` for an accordion used as a LIST that fills a `padding="none"` Card: the rules and any row background then span the card's full width, while the content still sits on a 20px edge. Padding it inside an already padded Card insets it twice. |
size | 'sm' | 'md' | 'md' | Row height. Defaults to the 60px FAQ scale. |
weight | 'normal' | 'bold' | 'bold' | Title weight. Bold by default — an accordion is usually a heading over its content. `normal` is for a row that is one entry in a list rather than a heading, where bold would instead be free to mean something (the nav drawer bolds the section the visitor is currently inside). |
divider | boolean | true | Draw the hairline rule under the item. On by default, which is what a multi-item accordion needs. Turn it OFF for a single item filling its own Card — the card's border already closes the row, and the rule would just hang across the bottom of it. |
className | string | '' | — |
childrenrequired | ReactNode | — | — |
Accessibility
- Each header is a real button with aria-expanded, and the panel is associated with it.
- Content in a closed panel is not read out — so it must not hold anything essential to the page.
Usage
Do
- Write the title as the question or the label — it is the only thing visible when closed.
Don’t
- Don’t collapse something the user is likely to need. Every closed section is a click you have imposed.
- Don’t nest accordions more than one level.