Accordion

Vertically stacked, collapsible content sections. Use for organizing related content that can be progressively disclosed.

Setup

import { Accordion } from '@fragments-sdk/ui';

Examples

Loading preview...

Loading preview...

Loading preview...

Props

Prop	Type	Default	Description
`type`	`enumsinglemultiple`	`single`	Whether one or multiple items can be open
`value`	`union`	Not set	Controlled open item(s): string in single mode, string[] in multiple mode
`defaultValue`	`union`	Not set	Initially open item(s): string in single mode, string[] in multiple mode
`onValueChange`	`union`	Not set	Called when open items change (single: string \| undefined, multiple: string[])
`children`Required	`node`	Not set	Accordion items (use Accordion.Item with Accordion.Trigger and Accordion.Content)
`collapsible`	`boolean`	`false`	Whether all items can be closed (single mode only)
`headingLevel`	`union23456`	`3`	Semantic heading level for accordion triggers

Usage Guidelines

When to use

FAQ pages with multiple questions and answers
Settings panels with grouped options
Long forms that benefit from progressive disclosure
Navigation menus with nested items

When not to use

Primary content that all users need to see
Very short content (just display inline)
Sequential steps (use Stepper or wizard)
Tab-like navigation (use Tabs instead)

Best practices

Keep section headers concise and descriptive
Use single mode when only one section should be open at a time
Use multiple mode when users may need to compare sections
Consider defaulting important sections to open
Avoid nesting accordions more than one level deep

Accessibility

Keyboard navigation with Enter/Space to toggle
Uses proper ARIA expanded/controls attributes
Focus is visible on accordion triggers

Tabsalternative

Use Tabs for horizontal switching between related views

Dialogalternative

Use Dialog for focused content that interrupts the flow

Cardcomplementary

Accordion items can contain Card-like content