React Accordion - Form with Plus Trigger
A multi-step form with plus/minus toggle indicators that expand and collapse sections for personal, contact, and address data
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Remember building forms with those tiny chevron icons that users barely notice? This React accordion form uses bold plus/minus indicators from Lucide React that actually feel interactive. Built with shadcn/ui components and Radix UI primitives, it keeps form inputs alive while collapsed—perfect for multi-step forms with React Hook Form validation.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/accordion-form-2.jsonnpx shadcn@latest add https://www.shadcn.io/registry/accordion-form-2.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/accordion-form-2.jsonbunx shadcn@latest add https://www.shadcn.io/registry/accordion-form-2.jsonRelated patterns you will also like
Accordion Form with Icons
Multi-step form with icon indicators for each section
Accordion Tabs with Plus Trigger
Tab-style accordion with plus/minus toggle indicators
Collapsible Card
Expandable card component for progressive disclosure
Multi-level Accordion
Nested accordion structure for hierarchical content
Dialog Form
Modal dialog with form inputs for focused data entry
Standard Accordion
Basic accordion pattern for simple content toggling