Accordion
Vertically stacked sections that expand to reveal their content, such as FAQs or grouped settings.FAQ (single, collapsible)
Preview
Code
Yes. It follows the WAI-ARIA accordion pattern: headings, buttons and regions, with arrow-key navigation between sections.
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Accordion } from '@advui/core'
<Accordion type="single" collapsible>
<Accordion.Item value="shipping">
<Accordion.Trigger>How long does shipping take?</Accordion.Trigger>
<Accordion.Content>Three to five working days.</Accordion.Content>
</Accordion.Item>
</Accordion>Examples
Card (multiple, disabled item)
Several sections can be open; rich triggers and content.Preview
Code
Email digests
Push notifications
API reference
Accordion
| Prop | Type | Default | Description |
|---|---|---|---|
type required | 'single' | 'multiple' | — | Whether one or several sections can be open at once. |
value | string | string[] | — | Open section (`single`) or sections (`multiple`), when you control them. |
defaultValue | string | string[] | — | Sections open at first, when the accordion manages them. |
onValueChange | (value) => void | — | Called when sections open or close. |
collapsible | boolean | false | Single mode: allow closing the open section. |
variant | 'default' | 'card' | 'default' | Divided list or bordered surface. |
disabled | boolean | — | Disable every section. |
Accordion.Item
| Prop | Type | Default | Description |
|---|---|---|---|
value required | string | — | Section id. |
disabled | boolean | — | Prevent opening this section. |
Accordion.Trigger
| Prop | Type | Default | Description |
|---|---|---|---|
children required | ReactNode | — | Section title. Strings are styled for you. |
level | 1 | 2 | 3 | 4 | 5 | 6 | 3 | Heading level around the trigger on web; match your page outline. |
Accordion.Content
| Prop | Type | Default | Description |
|---|---|---|---|
children required | ReactNode | — | Section body. Strings are styled for you. |
Accessibility
- WAI-ARIA accordion: each trigger is a button with
aria-expandedinside a heading, and each panel is aregionlabelled by its trigger. - Arrow keys move between triggers; disabled sections are skipped by the pointer and announced as disabled.
- The open/close animation is skipped when the user prefers reduced motion.
| Key | Action |
|---|---|
| Enter / Space | Opens or closes the focused section. |
| ↓ / ↑ | Moves focus to the next / previous trigger. |
| Home / End | Moves focus to the first / last trigger. |
Responsive behavior
Fills its container; set maxWidth to keep long lines readable.
Platform notes
Web
Triggers are wrapped in
h3 headings by default (see level).iOS
Triggers are exposed as buttons with their expanded state; heading wrappers are web-only.
Android
Same as iOS. With
androidRipple (on in material()), presses show the native ripple.