Accordion

Single, collapsible

On the first of each month, for the seats in use.

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@rookcom/monarch-react';

<Accordion type="single" collapsible defaultValue="billing">
  <AccordionItem value="billing">
    <AccordionTrigger>When am I billed?</AccordionTrigger>
    <AccordionContent>
      On the first of each month, for the seats in use.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="cancel">
    <AccordionTrigger>Can I cancel at any time?</AccordionTrigger>
    <AccordionContent>
      Yes. Access continues to the end of the paid period.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Usage examples

The example at the top of the page is the only one for this component.

Purpose

Shows a list of headings and reveals the body of one (or several) on demand, so long reference content stays scannable. FAQ in the marketing entry is built on it.

Use when

Reference content where people look for one item: FAQs, policy sections, help topics.
Optional detail under a summary, such as advanced settings explained in prose.

Avoid when

Switching between views of the same object: use Tabs.
Content everyone must read: show it; hiding it costs a click.
Form steps: use a stepper or separate pages.

Design principles

Each trigger is a real heading (h3 by default, headingAs to change), so items appear in the page outline.
Quiet chrome: hairline dividers, medium-weight labels, one chevron that rotates; no boxes or fills.
Built on Radix Accordion for the keyboard model and ARIA wiring.

API reference

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@rookcom/monarch-react';

Export	Kind	Rendering	Root class
`Accordion`	component	client	`.mn-accordion`
`AccordionContent`	component	client	`.mn-accordion`
`AccordionItem`	component	client	`.mn-accordion`
`AccordionTrigger`	component	client	`.mn-accordion`

Accordion is Radix Accordion.Root: type="single" (with collapsible) or type="multiple", controlled via value/onValueChange or uncontrolled via defaultValue.

AccordionTrigger renders Header (as the chosen heading element) and Trigger together.

AccordionContent wraps children in .mn-accordion__body, which caps line length at --mn-width-narrow.

Generated from the TypeScript declarations of packages/react/src/components/data-display/accordion.

Properties

`Accordion`

Stacked disclosure sections. Enter/Space toggle, arrow keys move between headers, Home/End jump to the first and last. Built on Radix Accordion.

Prop	Type	Description
`asChild`	`boolean`
`children`	`ReactNode`
`className`	`string`
`disabled`	`boolean`	Whether or not an accordion is disabled from user interaction.
`id`	`string`

`AccordionContent`

Prop	Type	Description
`asChild`	`boolean`
`children`	`ReactNode`
`className`	`string`
`id`	`string`

`AccordionItem`

Prop	Type	Description
`asChild`	`boolean`
`children`	`ReactNode`
`className`	`string`
`disabled`	`boolean`	Whether or not an accordion item is disabled from user interaction.
`id`	`string`

`AccordionTrigger`

Prop	Type	Description
`asChild`	`boolean`
`children`	`ReactNode`
`className`	`string`
`disabled`	`boolean`
`headingAs`	`HeadingLevel`	Heading element wrapping the trigger, so the item appears in the page outline.
`id`	`string`

Variants

Prop	Values	Description
`type`	`'single''multiple'`	One open item at a time, or any number.
`headingAs (AccordionTrigger)`	`'h2''h3''h4'`	Heading level of each trigger. Pick the level below the surrounding heading.

States

State	Exposed as	Behaviour
Open	`data-state="open"`	Body shown; chevron rotated 180°.
Closed	`data-state="closed"`	Body removed.
Disabled	`data-disabled`	Set `disabled` on an item or the root; the trigger cannot toggle.

Interaction behaviour

Click, Enter or Space on a trigger toggles its item.
With type="single", opening one item closes the other; collapsible lets the open item close.
The body animates its height over --mn-duration-base; reduced motion removes the animation.

Keyboard support

Keys	Action
`Tab`	Moves to the next trigger or into an open body.
`Enter / Space`	Toggles the focused item.
`Arrow Down / Arrow Up`	Moves focus to the next / previous trigger.
`Home / End`	Moves focus to the first / last trigger.

Accessibility

Role: button (inside a heading)
Accessible name: The trigger text.

Triggers expose aria-expanded and aria-controls; bodies are role="region" labelled by their trigger.
The chevron is decorative (aria-hidden).
The focus ring uses --mn-color-focus-ring, which inverse marketing sections remap.
Trigger rows are at least 56px tall, beyond the 24px target size (WCAG 2.5.8).

Responsive behaviour

Full width of its container at every size; labels wrap, and the chevron stays top-aligned to the first line.

Theme support

Borders use --mn-color-border-default, text --mn-color-text-default and -muted; light, dark and more-contrast apply automatically.
Open/close animation is disabled under prefers-reduced-motion: reduce by the foundation stylesheet.

Do and don't

Do

Write triggers as the question or topic people scan for.
Set headingAs so the outline has no skipped levels.

Don't

Do not nest accordions.
Do not hide the only copy of critical information (prices, legal terms) in a closed item.

Tabs: Switch between peer views instead of expanding in place.
Marketing sections: FAQ is Accordion with marketing defaults (one open, heading per question).

Dependencies

Kind	Depends on
npm packages	`@radix-ui/react-accordionreact`
Monarch components	None

Testing coverage

Triggers sit inside a heading of the requested level.
Enter toggles; Arrow keys, Home and End move between triggers; single mode closes the other item.
No axe violations; renders on the server.

Check	Covered
Axe in jsdom	Yes
Server rendering	Yes
Browser suites	Visual and three-browser axe: /__marketing (FAQ)

Tests: packages/react/src/components/data-display/accordion