Accordion

Alpha

Expand/collapse sections of content. Supports single or multiple open items, controlled and uncontrolled modes.

Import

import { Accordion } from "@compa11y/react";

Usage

Example.tsx

import { Accordion } from "@compa11y/react";

// Uncontrolled, single mode
function Example() {
  return (
    <Accordion defaultValue="item-1">
      <Accordion.Item value="item-1">
        <h3><Accordion.Trigger>Section 1</Accordion.Trigger></h3>
        <Accordion.Content>Content for section 1.</Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="item-2">
        <h3><Accordion.Trigger>Section 2</Accordion.Trigger></h3>
        <Accordion.Content>Content for section 2.</Accordion.Content>
      </Accordion.Item>
    </Accordion>
  );
}

// Multiple items open, with a disabled item
function MultipleExample() {
  return (
    <Accordion type="multiple" defaultValue={["item-1"]}>
      <Accordion.Item value="item-1">
        <h3><Accordion.Trigger>Open by default</Accordion.Trigger></h3>
        <Accordion.Content>Content 1</Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="item-2" disabled>
        <h3><Accordion.Trigger>Disabled</Accordion.Trigger></h3>
        <Accordion.Content>Unreachable</Accordion.Content>
      </Accordion.Item>
    </Accordion>
  );
}

Features

aria-expanded on each trigger
aria-controls linking trigger to its panel
role='region' with aria-labelledby on panels
Single and multiple open item modes
collapsible prop for single mode
Arrow key navigation between triggers
Disabled item support
Controlled and uncontrolled modes

Props

Accordion component props
Prop	Type	Default	Description
`type`	`'single' \| 'multiple'`	`'single'`	Allow one or many items open at a time
`collapsible`	`boolean`	`false`	In single mode, allow closing the active item
`value`	`string \| string[]`	-	Controlled open item(s)
`defaultValue`	`string \| string[]`	-	Default open item(s)
`onValueChange`	`(value: string \| string[]) => void`	-	Called when open items change

Sub-components

Accordion.Item

Accordion.Item props
Prop	Type	Default	Description
`value`*	`string`	-	Unique identifier for this item
`disabled`	`boolean`	`false`	Prevents opening/closing

Accordion.Trigger

Accordion.Trigger props
Prop	Type	Default	Description
`children`*	`ReactNode`	-	Header button content — wrap in a heading element (h2–h6)

Accordion.Content

Accordion.Content props
Prop	Type	Default	Description
`forceMount`	`boolean`	`false`	Keep content in the DOM when closed (hidden via hidden attribute)
`children`*	`ReactNode`	-	Panel content

Keyboard Interactions

Accessibility

All keyboard interactions follow WAI-ARIA best practices and work without any additional configuration.

Keyboard shortcuts for Accordion
Key	Action
`Enter / Space`	Toggles the focused section open or closed
`ArrowDown`	Moves focus to the next accordion header
`ArrowUp`	Moves focus to the previous accordion header
`Home`	Moves focus to the first accordion header
`End`	Moves focus to the last accordion header
`Tab`	Moves focus into/out of the accordion