Accordion

Group related questions or settings into independently expandable sections.

Use a single collapsible accordion when readers should focus on one answer at a time.

What happens after a booking is confirmed?

Can I send service reminders?

Show codeCopy

Import

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@workshop1/ui/components/accordion"

Behaviour

Use type="single" when one open answer at a time keeps the page easier to scan. Add collapsible when every section may close. Use type="multiple" only when readers need to compare several open sections.

Accessibility

Each trigger is a heading-owned button with its expanded state managed by the primitive. Keep trigger text descriptive, preserve the built-in keyboard behaviour, and use distinct value props for predictable controlled state.

Best practices

• Group closely related questions or settings.
• Keep the most important information visible outside the accordion.
• Avoid nesting accordions.