Featured
FAQFAQ Accordion
An accessible accordion where one answer opens at a time.
#faq#accordion#disclosure
6 frameworksIntermediate
Loading…
An accordion that tints the whole card while its answer is open.
<!--
The open item tints its whole card. The tint is redundant reinforcement, not
the state itself - [open]/aria-expanded is what conveys it, so this still
reads correctly with colour filtering or a forced-colours mode on.
-->
<div class="acc-fill">
<details class="acc-fill__item" name="acc-fill" open>
<summary class="acc-fill__question">
What are your support hours?
<svg class="acc-fill__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-fill__answer">
<p>Support is staffed 24/5, Monday to Friday. Enterprise plans add weekend cover for urgent incidents.</p>
</div>
</details>
<details class="acc-fill__item" name="acc-fill">
<summary class="acc-fill__question">
How fast do you reply?
<svg class="acc-fill__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-fill__answer">
<p>The median first reply is under two hours. Priority tickets carry a one-hour contractual SLA.</p>
</div>
</details>
<details class="acc-fill__item" name="acc-fill">
<summary class="acc-fill__question">
Can I talk to a human?
<svg class="acc-fill__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-fill__answer">
<p>Always. There is no bot gate - every ticket goes straight to a support engineer.</p>
</div>
</details>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | FaqItem[] | - | The array of items to render. |
defaultOpenId | string | - | Id of the item expanded on mount. |
className | string | - | Additional classes merged onto the root element. |
The tint is redundant reinforcement rather than the state itself - `aria-expanded` and the chevron already carry it - so the component still reads correctly with colour filtering or a forced-colours mode on. Swap `bg-blue-50` / `dark:bg-blue-950` for any tint, but re-check the question text against it: the open row darkens to `text-blue-900` (and lightens to `text-blue-100` in dark mode) precisely to hold 4.5:1 on the fill.