The Accordion component allows users to expand and collapse content sections. It supports both single and multiple expanded items.
Installation
import {
Accordion,
AccordionItem,
AccordionTrigger,
AccordionPanel,
} from "@craftdotui/baseui/components/accordion";
<Accordion>
<AccordionItem value="item-1">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionPanel>
Yes. It adheres to the WAI-ARIA design pattern.
</AccordionPanel>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Is it styled?</AccordionTrigger>
<AccordionPanel>
Yes. It comes with default styles that can be customized.
</AccordionPanel>
</AccordionItem>
</Accordion>
Components
Accordion (Root)
Default opened item(s) in uncontrolled mode.
Controlled open state value.
Callback fired when the open state changes.
Allow multiple items to be open simultaneously.
AccordionItem
Unique identifier for the accordion item.
Prevents the item from being toggled.
AccordionTrigger
The trigger automatically includes a chevron icon that rotates when expanded.
AccordionPanel
Examples
Multiple Items Open
<Accordion openMultiple>
<AccordionItem value="item-1">
<AccordionTrigger>Section 1</AccordionTrigger>
<AccordionPanel>Content 1</AccordionPanel>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Section 2</AccordionTrigger>
<AccordionPanel>Content 2</AccordionPanel>
</AccordionItem>
</Accordion>
Controlled
const [value, setValue] = useState('item-1');
<Accordion value={value} onValueChange={setValue}>
<AccordionItem value="item-1">
<AccordionTrigger>Controlled Section</AccordionTrigger>
<AccordionPanel>This is controlled</AccordionPanel>
</AccordionItem>
</Accordion>
Accessibility
- Uses proper ARIA attributes for accordion pattern
- Keyboard navigation with Enter/Space to toggle
- Focus management
- Animated expansion with height transitions