Collapsible

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

Component parameters and their types.

Prop	Type	Default	Description
Open	bool	false	Controls whether the collapsible is expanded.
OpenChanged	EventCallback<bool>	—	Callback invoked when the open state changes.
Disabled	bool	false	Prevents toggling when true.
AsChild	bool	false	On CollapsibleTrigger: passes trigger behavior to the child element.
Class	string?	null	Additional CSS classes for the root element.
ChildContent	RenderFragment?	null	Content inside the component.

Previous Checkbox Next Color Picker