shadcn.io is not affiliated with official shadcn/ui
Real-Time Validation Form Block for Svelte
An invite-a-teammate form that answers as you type in a reserved line under each field, names the handle rule that is failing, and keeps a live checklist and a count of valid fields.
Installation
Overview
Answer as people type, without moving anything, with this real-time validation form for Svelte with Ark UI. A compact header over a hairline frame with a plus mark on each corner introduces four fields: work email, display name, a handle and a start date. Under every field a line is always reserved, and it answers while you type: the email asks for an @ and then a domain, the handle names the rule it is failing ("Lowercase letters and digits only", "Start with a letter", "At least 3 characters"), the start date must be a weekday inside a window, and a good value says "Looks valid" with a check. A field is only called wrong, with an alert icon, once you leave it or send. Beside the fields a checklist shows all four with a glyph and a word, and a count of valid fields sits next to Send invite. The Shine Button is the only colored control. It is built from Input, Label, Shine Button and Guides. For invites, sign-ups and any form with a rule people can get wrong while typing.
FAQ
How does the handle name the rule it is failing?
handleVerdict checks the rules in a fixed order (lowercase letters and digits only, starts with a letter, at least 3 characters, at most 16) and returns the first one that fails, as a sentence. Add or reorder a rule by adding or moving one check in that function; the line, the checklist and the count all read its result.
Why is a half-typed value not shown as an error?
While you type, an unfinished value gets a neutral dashed ring and the rule in muted text. Only after you leave the field, or send, does the same rule turn into an alert icon with the text color. That keeps live feedback from scolding someone in the middle of a word.
How does it avoid layout shift?
Every answer line is min-h-6 and always rendered, whatever it says, and the checklist is a fixed four rows. Nothing appears or disappears; only the words and the glyph inside the reserved boxes change.
How does it work with a screen reader?
Each input points at its answer line with aria-describedby, so the rule is read when you land on the field, and a field called wrong carries aria-invalid. The answer lines are not live regions, so typing is not narrated key by key; the foot status is the one polite region and speaks the result of Send invite.
What stays local, and how do I connect it for real?
Send invite clears the form and says "Invited in this demo. Nothing sent." The start window is two fixed dates in the file, not the clock. To make it real, post the values from the submit handler once every verdict is valid, and add server checks (a taken handle, an address already invited) as one more verdict on the same line.