Collapsible Component

An interactive component which expands/collapses a panel.

AsChild Pattern

Use AsChild to compose triggers with your own styled Button components.

Without AsChild

CollapsibleTrigger renders its own button with inline classes.

Hidden content revealed!

With AsChild

Button receives trigger behavior via TriggerContext.

Content using Button with AsChild!

Basic Usage

A simple collapsible with trigger and content.

Yes! This component is free to use in your projects.

Controlled Mode

Control the open state programmatically.

The parent component controls this collapsible's state.

Disabled State

Disable interaction with the collapsible.

This content cannot be toggled.

Accordion Style (Multiple Collapsibles)

Multiple collapsibles working independently.

A collapsible is an interactive component that allows users to show or hide content by clicking a trigger element. It's commonly used for FAQs, accordion menus, and expandable sections.

While both use similar patterns, an accordion typically allows only one section to be open at a time, whereas individual collapsibles can all be open simultaneously. Collapsibles are the building blocks for creating accordions.

Yes! Collapsibles can be nested to create hierarchical expandable content structures, perfect for navigation menus or multi-level FAQs.

Absolutely. The component follows WCAG 2.1 guidelines with proper ARIA attributes, keyboard navigation support, and screen reader compatibility.

With Icons and Badges

Enhance collapsibles with visual indicators.

Advanced analytics

Priority support

Custom branding

Nested Collapsibles

Collapsibles can contain other collapsibles for hierarchical content.

This parent contains nested collapsibles.

Nested content for child section 1.

Nested content for child section 2.

With Smooth Animations

Add CSS transitions for smooth expand/collapse effects.

This content animates smoothly when expanding and collapsing.

CSS transitions create a polished user experience.

Accessibility Notes

Best practices for accessible collapsibles.

✓ Keyboard navigation: Trigger responds to Space and Enter keys.

✓ ARIA attributes: aria-expanded reflects the current state.

✓ Screen readers: Content uses region role and aria-hidden.

✓ Focus management: Focus remains on trigger after expanding/collapsing.

✓ Semantic HTML: Proper button elements for triggers.

API Reference

Collapsible

Open

Type: bool | Default: false

Controls whether the collapsible is expanded.

OpenChanged

Type: EventCallback<bool>

Callback invoked when the open state changes.

Disabled

Type: bool | Default: false

Prevents toggling when true.

CollapsibleTrigger

Class

Type: string?

Additional CSS classes for the trigger button.

CollapsibleContent

Class

Type: string?

Additional CSS classes for the content container.