Navigation · §10.3

Accordion

Expandable sections.

Theme
Contrast
Language
Motion
Text size

Code

<Accordion><AccordionItem value="…"><AccordionTrigger>…</AccordionTrigger><AccordionContent>…</AccordionContent></AccordionItem></Accordion>

Accessibility

  • Buttons with aria-expanded; content hidden until opened.

Usage

Do

  • Secondary detail such as what family will and won't see.

Don't

  • Don't hide safety information in a collapsed section.

Platforms

Web
apps/web/components/ui/accordion.tsx
iOS
SwiftUI DisclosureGroup
Android
Compose expandable rows