Collapsible

One button that shows or hides one region.

Import
import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from '@texuli/primitives/collapsible';
Pattern
Disclosure (WAI-ARIA APG)
Size budget
4.0 KiB gzip for @texuli/primitives/collapsible
Reference
packages/primitives/docs/prim-collapsible.md

Live demo

Loading the Collapsible demo…

Anatomy

Collapsible anatomy: each box holds the parts inside it.
  • CollapsibleRoot
    • CollapsibleTrigger
    • CollapsibleContent

Behavior checks

tests/behavior/scenarios/collapsible.spec.ts runs 5 rows against the Collapsible scenario on Chromium, WebKit and the Pixel 7. Each row asserts what a user or assistive technology can observe, held to the WAI-ARIA Authoring Practices pattern.

All 5 rows
  1. the named button controls collapsed content
  2. pointer activation expands and collapses the content
  3. Space and Enter activate the disclosure button
  4. a disabled disclosure cannot be opened
  5. the disclosure has no axe violations

Limits

  • Every row passes on every project; a flaky row gets at most two retries.
  • Size: at most 4.0 KiB gzip for @texuli/primitives/collapsible (pnpm size).
  • Open-to-focus: p75 at most 150 ms (asserted with TEXULI_PERF=1).