Featured
FAQFAQ Accordion
An accessible accordion where one answer opens at a time.
#faq#accordion#disclosure
6 frameworksIntermediate
Loading…
Each question is a detached card, separated by whitespace instead of dividers.
<!--
Each question is its own detached card with a gap between them, so there are
no dividers at all - the whitespace does the separating.
-->
<div class="acc-sep">
<details class="acc-sep__item" open>
<summary class="acc-sep__question">
How long does setup take?
<svg class="acc-sep__icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="m5 7.5 5 5 5-5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</summary>
<div class="acc-sep__answer">
<p>Most teams are importing data within an hour. The guided setup walks you through it step by step.</p>
</div>
</details>
<details class="acc-sep__item">
<summary class="acc-sep__question">
Can I migrate from another tool?
<svg class="acc-sep__icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="m5 7.5 5 5 5-5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</summary>
<div class="acc-sep__answer">
<p>Yes. We import CSV exports from every major competitor, and our team will run the migration for you on annual plans.</p>
</div>
</details>
<details class="acc-sep__item">
<summary class="acc-sep__question">
Is training included?
<svg class="acc-sep__icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="m5 7.5 5 5 5-5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</summary>
<div class="acc-sep__answer">
<p>Every plan includes live onboarding sessions and unlimited access to the course library.</p>
</div>
</details>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | FaqItem[] | - | The array of items to render. |
allowMultiple | boolean | true | Allows more than one item open at once. |
defaultOpenId | string | - | Id of the item expanded on mount. |
className | string | - | Additional classes merged onto the root element. |
Gaps rather than dividers, which suits marketing pages where each answer should read as its own object. It defaults to `allowMultiple` because detached cards do not visually imply a group - set it to `false` for exclusive behaviour. Adjust the rhythm with `space-y-3` and keep the card radius on both the wrapper and the button so the focus ring follows the corner.