Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
Overview
Accordions allow users to expand and collapse sections of content, making interfaces more compact and focused. They're useful for organizing related information, FAQs, or settings in a space-efficient way.
Examples
Basic Accordion
Multiple Accordion
Use the type="multiple" prop to allow multiple accordion items to be open simultaneously.
Disabled Item
Use the disabled prop on an AccordionItem to prevent it from being interacted with.
Custom Styled Accordion
API Reference
The Accordion component consists of several subcomponents that work together to create expandable content sections.
| Component | Props | Description |
|---|---|---|
| Accordion | type: "single" | "multiple" collapsible?: boolean defaultValue?: string | string[] value?: string | string[] onValueChange?: function className?: string children: React.ReactNode | The main container component that provides the accordion's behavior and context. |
| AccordionItem | value: string disabled?: boolean className?: string children: React.ReactNode | A single accordion item containing a trigger and content. Each item must have a unique value. |
| AccordionTrigger | className?: string children: React.ReactNode | The button that toggles the accordion item. Must be used within an AccordionItem. |
| AccordionContent | className?: string forceMount?: boolean children: React.ReactNode | The content that is revealed when the accordion item is expanded. Must be used within an AccordionItem. |
All accordion components accept standard HTML attributes in addition to the props listed above.
Usage Guidelines
Follow these guidelines for effective use of the Accordion component:
Layout and Structure
Do
- Use clear, descriptive headings for each accordion item
- Group related content within each accordion item
- Keep content concise and focused on a single topic
- Use consistent styling across all accordion items
- Consider which accordion type (single or multiple) best suits your content
Don't
- Nest accordions within accordions (avoid excessive nesting)
- Hide critical information that users need to see immediately
- Use vague or generic headings that don't clearly indicate the content
- Put too much content in a single accordion item
- Use inconsistent styling across accordion items
Content Organization
Do
- Organize content in a logical order
- Use icons to enhance understanding when appropriate
- Keep the most important items at the top
- Ensure content within each item is related to its heading
- Use consistent formatting within accordion content
Don't
- Include content that doesn't match the accordion heading
- Mix unrelated topics within a single accordion item
- Use accordions for sequential content that should be read in order
- Hide primary navigation or critical actions in accordions
- Use accordions when there are only a few short items that could be displayed directly
Accessibility
Accordions should be accessible to all users, including those using screen readers or keyboard navigation.
ARIA Attributes
The accordion uses appropriate ARIA attributes like aria-expanded, aria-controls, and aria-labelledby to ensure proper accessibility for screen readers.
Keyboard Navigation
Users can navigate the accordion using Tab to move between triggers, and Enter or Space to expand/collapse content.
Focus Management
The accordion maintains proper focus states to indicate which item is currently focused during keyboard navigation.
Descriptive Headings
Use clear, descriptive headings for each accordion item to help users understand what content will be revealed.
Accessibility Tip
When using accordions for FAQs or similar content, ensure that the questions are clear and descriptive. This helps users decide whether they need to expand that section without having to open each one.