Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Accordion examples · Standard

Accordion with Left Plus/Minus Toggle for React

A bordered accordion of onboarding steps with a plus/minus toggle at the start of each trigger, before the title.

Framework
UI library

A plus/minus toggle at the start of each row says this opens before the reader reaches the title. This React accordion hides the built-in chevron and puts a plus that turns into a minus before each onboarding step. Use it for checklists, step lists and sidebars where the toggle should lead.

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 end up before the title?

The plus and minus sit in a relative size-4 box, the first child of a gap-3 row, with the title after it in flex-1 text-start. **:data-[slot=accordion-trigger-icon]:hidden hides the built-in chevron. group-aria-expanded/accordion-trigger fades the plus out and the minus in over duration-200, and both icons are aria-hidden.

Why is the answer indented?

ps-7 on AccordionContent matches the 16px icon plus the 12px gap-3, so the answer lines up under the title.

Why does the workspace step start open?

defaultValue={["workspace"]} opens the workspace step 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.

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