Collapse

A section that opens and closes. Stack them and you have an accordion, which is what Kobalte's Accordion renders: a heading with a trigger, then a region.

alpha The class names and states here are stable. The look is not: these styles can change in a minor release, without a major version bump.

Class	Does what
`collapse`	One section, with a rule under it
`collapse-title`	The trigger row
`collapse-content`	The panel

Basic

<details> gives you this with no script. Kobalte gives you keyboard navigation across the whole stack, and marks the open item data-expanded.

<details class="collapse" open>
  <summary class="collapse-title">What is included? <span>−</span></summary>
  <div class="collapse-content">Everything in the free plan, plus unlimited projects.</div>
</details>
<details class="collapse">
  <summary class="collapse-title">Can I cancel? <span>+</span></summary>
  <div class="collapse-content">Any time, from the billing page.</div>
</details>

<details class="collapse" open>
  <summary class="collapse-title">What is included? <span>−</span></summary>
  <div class="collapse-content">Everything in the free plan, plus unlimited projects.</div>
</details>
<details class="collapse">
  <summary class="collapse-title">Can I cancel? <span>+</span></summary>
  <div class="collapse-content">Any time, from the billing page.</div>
</details>

import { Accordion } from "@kobalte/core/accordion";

<Accordion defaultValue={["included"]}>
  <Accordion.Item value="included">
    <Accordion.Header>
      <Accordion.Trigger>What is included? <span>−</span></Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Content>
      Everything in the free plan, plus unlimited projects.
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="cancel">
    <Accordion.Header>
      <Accordion.Trigger>Can I cancel? <span>+</span></Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Content>Any time, from the billing page.</Accordion.Content>
  </Accordion.Item>
</Accordion>

<div>
  <h3><button aria-expanded="true" aria-controls="r1" data-expanded>What is included? <span>−</span></button></h3>
  <div role="region" id="r1" data-expanded>Everything in the free plan, plus unlimited projects.</div>
  <h3><button aria-expanded="false" aria-controls="r2">Can I cancel? <span>+</span></button></h3>
  <div role="region" id="r2" hidden>Any time, from the billing page.</div>
</div>

Kobalte's Trigger has no role of its own, so the binding reaches it as the button inside the heading that precedes a role="region". That is the most positional selector in the Kobalte layer.