Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Accordion examples · Form

Accordion Form with Icon Sections for React

A form split into personal, contact and address sections, each an accordion item with an icon, that keep their typed values while closed.

Framework
UI library

A long form is easier to face in pieces. This React accordion splits one into Personal Information, Contact Information and Address Information sections, each trigger led by an icon, with the inputs in the content. The closed sections stay in the page, so what someone typed is still there when they come back, and every field still submits with the form. Use it for sign-ups, checkout details and profile settings.

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 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.

Where do the section icons come from?

Each section stores UserIcon, MailIcon or MapPinIcon. The trigger renders it at size-4 with text-muted-foreground and aria-hidden, in a gap-2 row before the title.

How do I open the personal section on first render?

This demo sets no defaultValue, so every section starts closed. Pass defaultValue={["personal"]} to open Personal Information.

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.

How do the section 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.

All 21 accordion examples