Accordion

Sections of a record that open and close, so a long panel can be read a part at a time.

Try it

Search this page for “questionnaire”: the browser opens the section that holds it.

One at a time

Several may be open, which is what is drawn and what a record wants: Diagnosis read against Notes. exclusive is for a list of questions, where the one just opened is the one being read. It gives the items one name, and closing the others is the platform’s.

The native element

An item is a details and its row a summary. Opening and closing, Enter and Space, and the state a screen reader says are the platform’s, and so is one thing a scripted accordion does not have: text inside a closed section is found by the browser’s own search, which opens it. The opening is animated only where the platform can animate to a height it has not been told, and not at all for a reader who asked for less motion; elsewhere a section is open or it is not.

The action

The drawn row has an add button at its end, shown under the pointer. Two things differ here. It is outside the summary, since a button inside a control is invalid and a press on it would also toggle the section; it is laid over the row’s end and the summary keeps that room clear. And it is always shown: a control that exists on hover does not exist for the keyboard or for touch.

Anatomy

The chevron is at the start, as in the published set; older frames have it at the end, after the action. Decided on 2026-09-21: at the start the titles stand in a column and the end is the action’s alone.

Accessibility

The title is a heading inside the summary, so the sections are in the page’s outline; headingLevel is one below the heading the accordion stands under. The count is read after the title. The chevron is the only mark of open and closed for the eye, so it is held to 3:1; the state itself is the element’s. The focus ring is drawn inside the row, where a scrolling panel cannot cut it.

Using it

import { Accordion, AccordionItem, Badge, Button } from 'alpenglow';

<Accordion headingLevel={3}>
  <AccordionItem title="Forms" count={2}>…</AccordionItem>
  <AccordionItem
    title="Diagnosis"
    count={diagnoses.length}
    action={<Button variant="ghost" tone="neutral" size="sm" aria-label="Add diagnosis" iconStart={<Add />} onClick={add} />}
    defaultOpen
  >
    …
  </AccordionItem>
  <AccordionItem title="Billing" meta={<Badge tone="danger">Unpaid</Badge>}>…</AccordionItem>
</Accordion>

// One at a time.
<Accordion exclusive>…</Accordion>