How to build an accessible Collapsible in React

Built on a native <details>/<summary>, so the button role, the expanded state, and Enter/Space activation come from the platform rather than from ARIA, and the content renders before any JavaScript runs; the region is labelled by the trigger so screen readers announce the disclosure target

When to use a Collapsible

• Hiding a single secondary block until the user asks for it
• Progressive disclosure of details, advanced options, or supplementary text
• Toggling one region whose state you may want to control externally

When not to use it

• Several mutually related sections — use Accordion instead
• Transient overlays anchored to a trigger — use Dropdown or Popover

Keyboard interactions

Role button, verified at WCAG 2.2-AA.

• Enter
• Space

Common mistakes

Avoid: Stacking many Collapsibles to emulate an accordion

Prefer: Use Accordion when sections are a related set

Accordion manages single/multiple-open semantics and shared keyboard navigation

Example

<Collapsible trigger="Show details">
  <p>Hidden content revealed on toggle.</p>
</Collapsible>

See the full Collapsible reference →