Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Accordion examples · Form

Accordion Form with Plus/Minus Toggle for React

A form split into personal, contact and address accordion sections, each with an icon and a plus/minus toggle, that keep their values while closed.

Framework
UI library

The same sectioned form as the icon version, with a plus on each trigger that turns into a minus when its section opens. This React accordion keeps the closed sections in the page, so typed values survive switching sections and still submit. Use it for onboarding and settings forms 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

Do the fields keep what I typed after I close a section?

Yes. This demo passes keepMounted on Accordion, so a closed panel stays in the DOM and the uncontrolled inputs keep their text.

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.

Are the section icons separate from the plus and minus?

UserIcon, MailIcon or MapPinIcon sits in a gap-2 row before the title, at size-4 with aria-hidden. The plus and minus are a second icon box, pushed to the end of the trigger with justify-between.

How are the inputs labeled?

Each Input gets type, placeholder and aria-label from its field. Name and address fields use type="text", email uses type="email", and phone uses type="tel". There is no visible label, so the aria-label is the field name.

How is the stack of inputs spaced?

AccordionContent uses flex flex-col gap-2 pt-1. Personal has two name fields, contact has email and phone, and address has street, city, state and zip.

How do I let several sections 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.

All 21 accordion examples