Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Form blocks

Pro

Accordion Sections Form Block for Svelte

A seller profile split into three accordion sections whose headers show required progress and a check, and whose failed save opens every section with a problem and focuses the first field.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Split a long form into sections that know their own status with this accordion form for Svelte with Ark UI. A compact header sits over a hairline frame with a plus mark on each corner, holding three Accordion sections (Your shop, About you and Shipping) that can be open together. Each header shows how much of its section is done ("2 of 3 required"), a check when it is complete and, after a failed save, a "1 problem" mark. Save profile checks all seven required fields at once: it opens every section that has a problem, even a closed one, names each problem under its field and puts focus on the first. Reset puts the starting values back. The Shine Button is the only colored control. On a phone the sections stack as they are and the foot is pinned. It is built from Accordion, Input, Native Select, Textarea, Shine Button and Guides. For seller and company profiles, onboarding forms and any form with groups of fields people finish in any order.

FAQ

How do I add or change a section?

Each section is a Section with an id, a title and the names of its required fields, and problemOf holds the rule for every field. Add an entry to SECTIONS, a matching AccordionItem with its fields, and the header counts, the problem marks and the "open every section with a problem" step follow from the data.

How does a failed save open the right sections?

Save works out every problem first, then adds the id of each section that holds one to the list of open items and focuses the first field. The values live in the form's state, not in the closed panels, so nothing is lost when a section is closed.

How does it work with a keyboard and a screen reader?

Each header is a button inside a real heading, with aria-expanded, and its name reads the title, the problem count and the progress. Arrow keys move between the headers. The foot status is the one polite region and says how many problems are left.

How does it look on a phone?

The headers keep one line: the progress text stays and the title wraps first. Fields stack in one column and the Save and Reset buttons share a pinned foot.

What stays local, and how do I connect it for real?

Save profile says the profile was saved in this demo and sends nothing. To make it real, post the values from the submit handler when problemsOf returns nothing, and write your server's field errors into the same slots so the right section opens.

How do I connect it to react-hook-form or TanStack Form?

react-hook-form is a React library; use TanStack Form's adapter for your framework, keep one form for all sections and open the sections whose fields report errors when submit is refused.
All 100 form blocks