Accordion
<Accordion>TailwindCSS ModulesExpandable sections for FAQs and grouped content, with single or multiple open panels.
InstallationColoxo CLI
npx coloxo add accordion --style coloxo-cssES Module ImportPlayground / npm package
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@coloxo/ui';1. Expandable sections
Reveal related content on demand. Indicators use the ChevronDown icon from Lucide React.
Single expansion
Yes. Each section uses a heading and button with linked expanded state and content, supported by React Aria.
Multiple expansion
Yes. Each section uses a heading and button with linked expanded state and content, supported by React Aria.
Enable allowsMultipleExpanded to expand more than one section at a time.
Disabled section
2. Interactive configurator
Visual Render Canvas
tsx
<Accordion> <AccordionItem id="faq"> <AccordionTrigger>Is it accessible?</AccordionTrigger> <AccordionContent>Yes. Keyboard and screen reader support is built in.</AccordionContent> </AccordionItem></Accordion>3. Dark theme
Surfaces, text, borders, and Lucide icons follow theme tokens.
Yes. Each section uses a heading and button with linked expanded state and content, supported by React Aria.
4. Enterprise layout compositions
Organize help content and group related form fields.
Workspace help
Answers to common team questions.
Employee profile
Accessibility
Keyboard interaction
Tab moves between triggers and focusable panel content. Enter or Space expands and collapses the focused section. Disabled sections cannot be toggled.
Headings and state
Triggers expose aria-expanded and aria-controls. Use headingLevel to match the page outline. Decorative Lucide icons are hidden from assistive technology; their rotation respects reduced motion.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Compose AccordionItem, AccordionTrigger, and AccordionContent. |
| allowsMultipleExpanded | boolean | false | Allow several panels to stay open. |
| expandedKeys / defaultExpandedKeys | Iterable<Key> | — | Controlled expanded item IDs or initial expanded IDs. |
| onExpandedChange | (keys: Set<Key>) => void | — | Called when expanded items change. |
| isDisabled | boolean | false | Disable the group or an individual AccordionItem. |
| variant | "default" | "bordered" | default | Divider style or enclosed border. |
| id | Key | — | AccordionItem: unique ID used for expansion state. |
| headingLevel | 2 | 3 | 4 | 5 | 6 | 3 | AccordionTrigger: semantic heading level. |
| className | string | — | Additional class on any Accordion component. |