Components
Collapsible
A simple and accessible collapsible component that allows toggling the visibility of its content.
Introduction
The Collapsible component is a versatile and accessible solution for toggling the visibility of content. It is perfect for FAQs, expandable lists, and more.
Default Use Case: Collapsible Content Section
@peduarte starred 3 repositories
@radix-ui/primitives
Installation
Install the Collapsible component
File Structure
collapsible.tsx
Prop Types
| Prop | Type | Default |
|---|---|---|
open | boolean | false |
onOpenChange | (isOpen: boolean) => void | - |
disabled | boolean | false |
children | React.ReactNode | - |
Features
- Expandable and Collapsible:
- Show or hide content dynamically with a toggle button.
- Built-In Accessibility:
- Fully compliant with ARIA roles and attributes.
- Customizable:
- Works seamlessly with any content or custom components.
Conclusion
The Collapsible component is an accessible and versatile solution for creating expandable sections in your UI. It simplifies content toggling and ensures a user-friendly experience.