Accordion

A flexible, accessible accordion component for organizing content into collapsible sections.

Basic Accordion

Accordion with Multiple Items

Installation

The Accordion component is a powerful tool for organizing content in a collapsible and accessible manner. It’s perfect for FAQs, sidebars, or dynamic forms.

Quickly add the component using:

npx axionjs-ui add accordion

Props

The Accordion component is modular and customizable. Here’s a detailed breakdown of its props:

Prop	Type	Default
`type`	`"single" \| "multiple"`	`"single"`
`collapsible`	`boolean`	`false`
`className`	`string`	-
`children`	`React.ReactNode`	-

Features

The Accordion component provides a rich feature set to meet modern development needs:

Fully Accessible:
- Built with ARIA roles and attributes for compliance with accessibility standards.
Customizable:
- Use variants for single or multiple item selection.
Keyboard Support:
- Fully navigable using the keyboard for an inclusive user experience.
Built with Radix UI:
- Leverages the robust and lightweight Radix UI library for interactive behavior.
Dynamic Icons:
- Includes animated chevrons to indicate open or closed states.

Use Cases

The Accordion component is highly versatile and can be used in various scenarios:

FAQs:
- Perfect for displaying frequently asked questions in a collapsible manner.
Forms:
- Organize complex forms into manageable sections.
Sidebars:
- Enhance sidebars with collapsible navigation items.

Accessibility

The Accordion component is designed with accessibility as a priority:

ARIA Roles:
- Uses role="button" and aria-expanded attributes to indicate open/closed states.
Keyboard Navigation:
- Supports Tab, Enter, and Arrow keys for seamless interaction.
Semantic Structure:
- Encourages wrapping triggers in appropriate heading tags for semantic HTML.

Conclusion

The Accordion component is an essential UI element for organizing content efficiently. With its flexibility, accessibility, and ease of use, it’s a perfect fit for modern web applications.