Skip to content
oks-ui

Accordion component

Accordion is a set of collapsible sections with single-open or multiple-open modes, three visual variants, and an animated open/close that respects reduced motion.

Data Display8 propsAccessibility notes

Playground

Change a prop on the right and the preview updates. Switch to Code to copy what you see.

Recipes

Copy-paste patterns for the ways Accordion actually gets used — each one a real, self-contained example.

One section at a time

selectionMode="single" closes the previous section when a new one opens — the classic FAQ behavior. Seed the open one with defaultExpandedKeys.

<Accordion selectionMode="single" defaultExpandedKeys={["order-status"]}>
  <AccordionItem itemKey="order-status" title="Order status">
    Ships in 2–3 business days.
  </AccordionItem>
  <AccordionItem itemKey="payment-method" title="Payment method">
    Visa, Mastercard, or Apple Pay — charged on shipment.
  </AccordionItem>
  <AccordionItem itemKey="delivery" title="Delivery">
    Free standard shipping, or next-day for a flat $6.
  </AccordionItem>
</Accordion>

Multiple open

The default selectionMode="multiple" lets any number of sections stay open at once — for reference content where users compare sections.

<Accordion selectionMode="multiple">
  <AccordionItem itemKey="a" title="Getting started">…</AccordionItem>
  <AccordionItem itemKey="b" title="Configuration">…</AccordionItem>
  <AccordionItem itemKey="c" title="Deployment">…</AccordionItem>
</Accordion>

Visual variants

Three looks: "light" (just dividers), "bordered" (one framed box), and "splitted" (each section its own card).

<Accordion variant="light">…</Accordion>
<Accordion variant="bordered">…</Accordion>
<Accordion variant="splitted">…</Accordion>

Item subtitles

An AccordionItem can carry a subtitle beneath its title for a bit of context before the section is even opened.

<Accordion selectionMode="single">
  <AccordionItem
    itemKey="plan"
    title="Current plan"
    subtitle="Pro · renews May 1"
  >
    You're on the Pro plan billed yearly.
  </AccordionItem>
  <AccordionItem
    itemKey="usage"
    title="Usage"
    subtitle="72% of monthly limit"
  >
    18,000 of 25,000 requests used this month.
  </AccordionItem>
</Accordion>

Example

accordion.tsx
<Accordion mode="single" defaultExpandedKeys={["shipping"]}>
  <AccordionItem itemKey="shipping" title="Shipping">
    Ships in 2–3 business days.
  </AccordionItem>
  <AccordionItem itemKey="returns" title="Returns">
    30-day returns, no questions asked.
  </AccordionItem>
</Accordion>

Props

The full public API for Accordion. Every prop is stable and intentionally typed.

Behavior & states

selectionMode

"single" | "multiple"

default: multiple

One-open accordion vs many.

expandedKeys / defaultExpandedKeys / onExpandedChange

Iterable<string> / …

default: —

Controlled / uncontrolled (identity = the AccordionItem key).

isDisabled

boolean

default: false

Non-togglable.

itemKey

string

default: the React key

Explicit identity if you can't set key.

Appearance

variant

"light" | "bordered" | "splitted"

default: light

Dividers / one box / separate cards.

isCompact

boolean

default: false

Tighter padding.

Styling

classNames

{ base?, item?, trigger?, content? }

default: —

Slot class overrides.

Content

title / subtitle / startContent

ReactNode

default: —

Header content.

Accessibility

  • Each header is a `<button>` with `aria-expanded` and `aria-controls` pointing at its panel.
  • Up/Down arrows move between headers; Home/End jump to the first/last.
  • Collapsed panels are `hidden`, so their content is out of the tab order and the accessibility tree.

More in Data Display