Accordion

Molecule

Vertically stacked, collapsible content panels. Single-open by default, or `allowMultiple` for independent panels. Fully keyboard accessible via native `<button>` disclosure headers.

Preview

Orders ship within 2 business days via standard carrier.

Code

<Accordion
  items={[
    { id: 'shipping', title: 'Shipping', content: '...' },
    { id: 'returns', title: 'Returns', content: '...' },
    { id: 'warranty', title: 'Warranty', content: '...', disabled: true },
  ]}
  defaultOpenIds={['shipping']}
/>

Preview

Content for section A.

Content for section B.

Code

<Accordion
  allowMultiple
  items={[{ id: 'a', title: 'Section A', content: '...' }, { id: 'b', title: 'Section B', content: '...' }]}
  defaultOpenIds={['a', 'b']}
/>

Accordion

Single open (default)

Allow multiple open