Accordion

A disclosure list built on the native details element, so toggling and keyboard support come for free.

Examples

Basic

Shipping

Orders ship within two business days.

Returns

Return any item within 30 days for a full refund.

Warranty

Covered for one year against defects.

Show code

<Accordion {items} />

Snippet content

Shipping

Orders ship within two business days.

Show code

<Accordion items={[{ id: "ship", title: "Shipping", content: body }]} />

{#snippet body()}
  <p>Orders ship <strong>within two business days</strong>.</p>
{/snippet}

Props

Prop	Type	Default	Description
`items`	`{ id: string; title: string; content: string \| Snippet }[]`	`—`	The sections to render. The content can be plain text or a snippet.

Each item is a <details>; the chevron rotates when open. Set content to a snippet to render links or markup inside a section.