Collapsible
An interactive component which expands/collapses a panel.
Last updated
Was this helpful?
An interactive component which expands/collapses a panel.
Last updated
Was this helpful?
Full keyboard navigation.
Adheres to the Disclosure WAI-ARIA design pattern.
The Collapsible Component is in the "Components Panel" under the "Radix" section. Click on it or drag it onto the canvas. The Collapsible will populate a template that's easy to adjust for your needs.
The Collapsible component consists of three main parts:
Collapsible: The root component that controls the collapsible behavior.
Collapsible Trigger: The button that toggles the collapsible.
Collapsible Content: The component that contains the collapsible content.
To customize the Collapsible component:
Collapsible Trigger: Modify the trigger element to change what users click to expand/collapse the content. This can be text, an icon, or any combination of elements.
Collapsible Content: Edit the content section to add whatever elements you want to show/hide when the collapsible is toggled.
Styling: Any of the three components can be styled to match your design requirements.
The Collapsible component is useful for various UI patterns:
FAQ sections
"Show more" content sections
Settings or preferences panels
Mobile navigation menus
Detail views that can be expanded/collapsed
