Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Accordion examples · Standard

Accordion with Plus/Minus Toggle for React

A bordered accordion of billing questions with a plus on the right of each trigger that turns into a minus when its answer is open.

Framework
UI library

A plus and a minus are harder to miss than a chevron. This React accordion hides the chevron that AccordionTrigger draws and places a plus on the right of each billing question, which fades into a minus while its answer is open. Use it for FAQs and help sections where the toggle should be obvious.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How does the plus turn into a minus?

**:data-[slot=accordion-trigger-icon]:hidden on AccordionTrigger hides the built-in chevron. PlusIcon and MinusIcon share one relative size-4 box, and group-aria-expanded/accordion-trigger fades the plus out and the minus in over duration-200. Both icons are aria-hidden and text-muted-foreground.

Why does the payment question start open?

defaultValue={["payment"]} opens the payment question on first render. The string matches that item's value.

How do I let several items stay open at once?

One open item is the default. Add multiple to Accordion to let several stay open, and list every item that should start open in the defaultValue array.

How do the row borders meet?

-space-y-px on Accordion pulls the rows together so neighboring borders share one line. Each AccordionItem has border, px-4, first:rounded-t-lg and last:rounded-b-lg.

How is the title kept beside the icon?

The trigger row is flex w-full items-center justify-between gap-3. The title has text-start, and the icon box is shrink-0.

Is keyboard navigation built in?

Yes. Each trigger is a button with aria-expanded and aria-controls, and Enter or Space toggles it. The arrow keys move between triggers, and Home and End jump to the first and last.

All 21 accordion examples