Accordion
Questions with their answers folded away under them, a hairline between each. The plus turns into a minus as an answer opens. The landing's FAQ is one. Built on Base UI's Accordion.
Playground
import {
Accordion,
AccordionItem,
AccordionPanel,
AccordionTrigger,
} from "@/components/shared/accordion";
<Accordion>
<AccordionItem value="ai">
<AccordionTrigger>Will my clients know it's not me?</AccordionTrigger>
<AccordionPanel>Yes. In its first reply …</AccordionPanel>
</AccordionItem>
…
</Accordion>One at a time
The default. Opening an answer closes the one that was open, and a second click on the open one closes it too.
import {
Accordion,
AccordionItem,
AccordionPanel,
AccordionTrigger,
} from "@/components/shared/accordion";
<Accordion defaultValue={["ai"]}>
<AccordionItem value="ai">…</AccordionItem>
<AccordionItem value="double">…</AccordionItem>
</Accordion>Several open
With multiple, each answer opens and closes on its own.
<Accordion multiple defaultValue={["ai"]}>
…
</Accordion>Motion
transitions.dev's accordion, on the scale: the answer's height grows and shrinks on --duration-fast with --ease-smooth-out, and its words fade in out of --blur-small as it opens. The plus becomes a minus by transitions.dev's icon swap on --duration-fast with --ease-in-out, tuned for the pair: the minus is the plus's own line, so it only fades in, holding still, while the plus folds its upright into the centre (to a quarter, out of --blur-small). Base UI measures the height, so nothing is measured by hand. With reduced motion it opens at once.
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| multiple | boolean | false | Lets several answers be open at once. Off, opening one closes the rest. |
| defaultValue | string[] | [] | The items open at first, by their value. All closed when left out. |
| value | onValueChange | string[] | (value) => void | — | The open items, controlled. |
| AccordionItem value | string | — | The item's name, for defaultValue and value. |
| AccordionTrigger | ReactNode | — | The question: a button under an h3, the whole row its target. |
| AccordionPanel | ReactNode | — | The answer. Closed, it stays in the page hidden until found, so find-in-page opens it. Links in it are ink and underlined. |
Usage
- For answers people look up one at a time: an FAQ, a settings group's details. Anything everyone needs stays open on the page.
- Write the trigger as the question someone would ask, in their words, and answer it in the first sentence.
- Keep answers short: a few sentences. Longer ones belong on a page of their own.