Skip to content
v2.5.0
English
Русский
Documentation

Collapsible

Collapsible is a compound component for one expandable region with a trigger and content surface.
StorybookSource

Labeling

The trigger should clearly describe the content it controls. Avoid generic labels like "Details" when the hidden region has a task-specific purpose.

Keyboard Behavior

AnnouncementFocus the demo and press a key from the table.
KeyAction
EnterSpaceExpands or collapses the content. The focus stays on the trigger.
Every row is checked in a real browser: Playwright presses the key in Chromium and checks where the focus and the active item land.

With asChild, the keys come from the rendered child: use a <button>, since the trigger adds no key handling of its own.

Focus Behavior

  • Focus should remain on the trigger when the section opens or closes.
  • Opening the section should not unexpectedly move focus into the content.
  • Collapsible content inside overlays should still be tested in the real stack.

Screen Reader Semantics

  • CollapsibleTrigger should expose expanded state and point to the controlled region through aria-controls.
  • The content region should have a stable ID.
  • The visible trigger text should make sense even when the section is collapsed.

Form Semantics

  • If the content contains optional form controls, labels and errors belong to those controls rather than to the root.
  • Hidden validation states should not become invisible without another outer signal.

Accessibility Risks

  • asChild rendering that drops button-like behavior.
  • Trigger labels that are too vague to explain the hidden region.
  • Important form errors hidden inside collapsed content without a visible summary.