component :: FAQ

The .faq component groups details/summary disclosures into the classic FAQ accordion — native behavior, zero JavaScript.

Does this need JavaScript?

No. The browser’s own details element does all the work.

How does exclusive-open work?

Every item in this group shares name=“demo”, so the browser only keeps one open. Remove the name and items open independently.

Is it keyboard accessible?

Natively: the summary is focusable and toggles with Enter/Space.

File	Description	Source
`component.faq.css`	Group spacing	Github
`elements.interactive.css`	The `details`/`summary` styling + chevron	Github
`Faq.astro`, `FaqItem.astro`	The Astro components	Github
`--faq-spacing` in default theme	Theme token	Github

HTML

<div class="faq">
  <details class="faq_item" name="faq">
    <summary>Does this need JavaScript?</summary>
    <div class="faq_content">
      <p>No. The browser's own details element does all the work.</p>
    </div>
  </details>
  <details class="faq_item" name="faq" open>
    <summary>How does exclusive-open work?</summary>
    <div class="faq_content">
      <p>Every item shares the same name attribute.</p>
    </div>
  </details>
</div>

Giving every item the same name makes the group exclusive-open (opening one closes the others). It is a progressive enhancement: browsers that don’t support exclusive accordions simply let several items stay open, which is a perfectly fine FAQ too.

Custom properties

Property	Description
`--faq-spacing`	Gap between items.

The item visuals come from the details element styling; there is nothing FAQ-specific to retheme.

Astro component

Faq takes only class and passes everything else to its root <div>. Items go in the default slot.

FaqItem

Prop	Type	Default	Description
`question`	`string`	—	The summary text. Required.
`open`	`boolean`	`false`	Render the item open.
`name`	`string`	`undefined`	Same name on every item of a group = native exclusive-open.
`class`	`string`	`undefined`	Additional CSS classes.

The default slot is the answer.

Examples

Independent items

No name, so this group lets several items stay open at once.

Pre-opened with the `open` prop

The first item above renders open.

---
import Faq from "../components/Faq.astro";
import FaqItem from "../components/FaqItem.astro";
---
<Faq>
  <FaqItem question="Independent items" open>
    <p>No `name`, so several items can stay open at once.</p>
  </FaqItem>
  <FaqItem question="Pre-opened with the `open` prop">
    <p>The first item above renders open.</p>
  </FaqItem>
</Faq>