Accordion

Accordion and AccordionItem are built on React Aria’s DisclosureGroup and Disclosure primitives. Each item has a trigger button and a collapsible panel.

Add via CLI

npx @a2ra/cli add accordion

Basic

Multiple expanded

Example JSON

{
  "type": "Accordion",
  "children": [
    {
      "type": "AccordionItem",
      "props": { "id": "q1", "heading": "What is A2UI?" },
      "children": "A2UI is a JSON schema for describing UI components."
    }
  ]
}

Accordion props

Prop	Type	Description
allowsMultipleExpanded	true false default	When true, multiple items can be open at once
isDisabled	true false default	Disables all items in the group
children	node[]	One or more AccordionItem nodes

AccordionItem props

Prop	Type	Description
heading	string	Trigger button label (required)
id	string	Stable identifier for the disclosure
defaultExpanded	true false default	Whether the item starts open
isDisabled	true false default	Disables this item’s trigger
children	string node[]	Panel content

Notes

• heading is required on every AccordionItem; it becomes the accessible trigger button label.
• By default only one item can be open at a time. Opening a new item automatically closes the previous one.
• The chevron rotates 180° when the panel is expanded via a CSS transition on [data-expanded].