Navigation

Accordion

Vertically stacked disclosure sections following the WAI-ARIA accordion pattern. Single or multiple items may be open at once.

Import

import { Accordion, AccordionItem } from "@zephora/react";

Examples

Single, collapsible

In single mode only one item opens; `collapsible` also allows closing it again.

Orders ship within 2 business days.

<Accordion type="single" collapsible defaultValue="shipping">
  <AccordionItem value="shipping" title="Shipping">
    Orders ship within 2 business days.
  </AccordionItem>
  <AccordionItem value="returns" title="Returns">
    Free returns within 30 days.
  </AccordionItem>
  <AccordionItem value="support" title="Support" disabled>
    Contact support.
  </AccordionItem>
</Accordion>

Multiple

`type="multiple"` lets several items stay open.

Colors, spacing and typography scales.

Light, dark and custom themes.

<Accordion type="multiple" defaultValue={["a", "b"]}>
  <AccordionItem value="a" title="Design tokens">
    Colors, spacing and typography scales.
  </AccordionItem>
  <AccordionItem value="b" title="Theming">
    Light, dark and custom themes.
  </AccordionItem>
  <AccordionItem value="c" title="Accessibility">
    Keyboard and screen-reader support.
  </AccordionItem>
</Accordion>

Controlled

In single mode `onValueChange` receives a string (empty when everything is closed).

Yes, MIT licensed.

Open: faq-1

const [open, setOpen] = React.useState("faq-1");

<Accordion
  type="single"
  collapsible
  value={open}
  onValueChange={(v) => {
    if (typeof v === "string") setOpen(v);
  }}
>
  <AccordionItem value="faq-1" title="Is it free?">Yes, MIT licensed.</AccordionItem>
  <AccordionItem value="faq-2" title="Does it support SSR?">Yes.</AccordionItem>
</Accordion>

API

Accordion props

Prop	Type	Default	Description
`type`	`"single" \| "multiple"`	`"single"`	Whether one or several items may be open at once.
`collapsible`	`boolean`	`false`	In single mode, allows closing the open item.
`value`	`string \| string[]`	—	Controlled open value(s).
`defaultValue`	`string \| string[]`	—	Initially open value(s) (uncontrolled).
`onValueChange`	`(value: string \| string[]) => void`	—	Receives a string in single mode and a string[] in multiple mode.
`unstyled`	`boolean`	`false`	Headless mode — inherited by items.

AccordionItem props

Prop	Type	Default	Description
`value` *	`string`	—	Value identifying this item in the accordion state.
`title` *	`ReactNode`	—	Header content rendered inside the trigger button.
`disabled`	`boolean`	—	Disables the trigger.
`unstyled`	`boolean`	—	Overrides the inherited headless mode.

Keyboard

Key	Action
`Enter / Space`	Toggles the focused section.
`ArrowDown / ArrowUp`	Move focus to the next / previous section header.
`Home / End`	Focus the first / last section header.