Accordionalternative
Use Accordion for multiple exclusive collapsible sectionsCollapsible
An interactive component that expands/collapses to show or hide content
Setup
import { Collapsible } from '@fragments-sdk/ui';Examples
Default
Basic collapsible with trigger and content
Loading preview...
Default Open
Collapsible that starts in the expanded state
Loading preview...
Chevron Start
Collapsible with chevron icon on the left
Loading preview...
No Chevron
Collapsible without chevron indicator
Loading preview...
Disabled
Collapsible in disabled state
Loading preview...
Multiple Sections
Multiple independent collapsible sections
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Collapsible.Trigger and Collapsible.Content components |
defaultOpen | boolean | false | Whether the collapsible is initially open (uncontrolled) |
open | boolean | Not set | Controlled open state |
onOpenChange | function | Not set | Callback when open state changes - (open: boolean) => void |
disabled | boolean | false | Whether the collapsible is disabled |
Usage Guidelines
When to use
- Showing/hiding additional content on demand
- Building accordions or expandable sections
- Collapsible navigation sections
- FAQ sections with expandable answers
- Settings panels with grouped options
When not to use
- Single item disclosure (use Accordion instead)
- Navigation menus with complex interactions (use Menu)
- Modal or overlay content (use Dialog or Popover)
Best practices
- Use clear trigger labels that indicate expandable content
- Consider defaultOpen for primary content users often need
- Keep trigger text concise but descriptive
- Use chevron icons consistently to indicate collapsible state
Accessibility
- Trigger must have aria-expanded to indicate state
- Content region needs aria-labelledby pointing to trigger
- Keyboard: Enter/Space toggles open state
- Focus should remain on trigger after toggle