shadcn.io is not affiliated with official shadcn/ui
Inline Validation Form Block for Svelte
An add-a-customer form that says nothing while you type in a fresh field, checks it when you leave, re-checks it as you fix it, and puts focus on the first problem at submit.
Installation
Overview
Reward early and punish late with this inline validation form for Svelte with Ark UI. A compact header over a hairline frame with a plus mark on each corner holds one band of four fields: full name, work email, a handle of 3 to 20 lowercase characters and a role. Typing in a fresh field never shows a message. Leaving it checks it, a field already flagged re-checks on every keystroke so the message clears the moment it is fixed, and a corrected field says "Looks good" with a check. Add customer checks the rest, names each problem under its field with an icon and puts focus on the first. Every message has its own reserved line, so nothing moves. The Shine Button is the only colored control. It is built from Input, Native Select, Label, Shine Button and Guides. For sign-ups, customer and contact records and any form where fields have rules.
FAQ
When exactly does a field get checked?
Three moments. When you leave a field you have edited, it is checked once. While a field shows a problem, every keystroke re-checks it, so the message goes away as soon as the value is right. At submit, every field is checked. A field you never touched is not flagged by tabbing past it, only by submit, and typing in a fresh field shows nothing at all.
How do I change a rule or add a field?
All the rules live in one function, problemsOf, which returns a message per field name, and ORDER lists the fields in the order they are checked and focused. Add a field by adding its name to ORDER, its rule to problemsOf and one TextField to the band. The same function answers the live "valid" count and the submit check, so a rule is written once.
Where does focus go, and what do screen readers hear?
Submit with problems puts focus on the first invalid field in ORDER, with aria-invalid set. Each field points at its message line with aria-describedby, so the problem is read with the field. The foot status is the one polite region and says how many fields to fix, or what was added.
Why does the form never jump when a message appears?
Each field has a line that is always rendered at the height of one line of small text. It holds the hint when all is well, "Looks good" when a fix passed, or the problem, so showing a message swaps text in place instead of pushing the next field down.
What stays local, and how do I connect it for real?
Add customer clears the form and says "Added in this demo. Nothing sent." To make it real, post the values from the submit handler once problemsOf returns nothing, and show the server's field errors in the same lines by writing them into the errors state from the response, for example a handle that is already taken.