accordion
details + summary. Exclusivity, keyboard, and semantics are the browser's — the shared name attribute does the grouping.
Example
Is it accessible?
Yes. It is a native disclosure element; AT support comes with it.
Is it styled?
Border-per-item, rotating chevron, hover underline — the shadcn look.
Is it animated?
Height eases via interpolate-size where supported; instant elsewhere.
Basic usage
<details name="faq">
<summary>Is it accessible?</summary>
<p>Yes.</p>
</details>
<details name="faq">
<summary>Is it styled?</summary>
<p>Also yes.</p>
</details>API
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
name | string | — | Groups disclosures so only one is open. Omit it for independent disclosures. |
open | native boolean | false | Sets and reflects the expanded state. |
Content/markup contract
| Part | Contract | Default | Description |
|---|---|---|---|
summary | first child | required | Native disclosure control with the styled chevron. |
| Content | elements after summary | — | Content shown when the disclosure is open. |
Accessibility
details and summary provide native disclosure semantics and assistive-technology support without JavaScript.
Browser support
The open/close animation uses ::details-content and interpolate-size: allow-keywords, set in the preset. Browsers without that animation support open instantly; behavior and content remain intact.