How to build an accessible Collapsible in React

The trigger is a native button exposing aria-expanded and aria-controls; the region is labelled by the trigger, so screen readers announce the disclosure state and 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 →