Accordion Form

Author and publication details organized into collapsible, independently saved sections.

Interactive Accordion0 of 3 sections completed

The People Behind the Story

Configure creative attribution, canonical publisher links, and distribution metadata section by section.

Drag to resize height

Interactive responsive preview

Drag handles on right and bottom to resize

npx shadcn add https://form.coolhead.in/registry/accordion-form

An accordion form divides complex, multi-faceted configurations into discrete, collapsible sections. Each section validates and saves independently:

Isolated Validation: Each accordion item encapsulates its own sub-form with React Hook Form, avoiding premature validation errors on other unvisited sections.
Section Status Indicators: Visual indicators and badges immediately communicate whether an item is completed, in progress, or empty.
Progress Tracking: A top-level progress bar provides clear completion feedback across all sections.
Session Durability: Values are persisted to localStorage, allowing users to pause and resume complex configurations at any time.