Accordion

Usage

import { Accordion } from '@wdzyi/ui';

<Accordion
  numbered
  items={[
    { id: 'decide', title: 'Start from the decision', content: 'I start by understanding…' },
    { id: 'resolve', title: 'Resolve the ambiguity', content: 'I’m comfortable with ambiguity…' },
  ]}
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

itemsAccordionItem[]

Each has an id, a title, its content, and a meta beside the title.

multipleboolean = false

Lets several rows be open at once. Otherwise opening one shuts the last.

open, defaultOpenstring[] = []

The ids of the open rows. Pass open to hold the state yourself.

onOpenChange(open: string[]) => void

Called with the open ids after each press.

numberedboolean = false

Counts the rows down the left, in mono.

level2 | 3 | 4 | 5 | 6 = 3

The heading level each title sits in, to fit the page around it.

Notes

• Each row opens by its grid row, so nothing is measured. The space opens first and the words follow it down out of a slight blur. Shutting, the words go first.
• The chevron’s arms each turn a quarter, the opposite way to each other, so it flattens into a line on the way and comes out the other way up. A band of foil grows down the side of an open row.
• Up and down move between the headers and wrap round, and Home and End go to the first and last. Each header is a button in a heading, and each panel a region named by it.
• A shut panel is inert, so nothing inside it can be tabbed to.
• With reduced motion, rows open without sliding.