shadcn.io is not affiliated with official shadcn/ui
Form Validation Checklist Features Block for Svelte
A sign-up form that checks itself: a card with email, password and confirmation beside six password rules and a strength meter that update as you type, with a submit button that stays disabled until every rule passes.
Installation
Overview
A live validation feature section for Svelte with Ark UI, written for Passkeep, a fictional identity API. A compact header sits over a band that runs rail to rail between the page's rules. At the start, a sign-up card in a hairline frame with + marks on its corners: a work email, a password and a confirmation, each with a show or hide button, and a Shine Button that stays disabled until the form is valid. At the end, past a divider, six password rules (length, mixed case, a number, a symbol, not containing the email name, matching the confirmation) and a strength meter. Each rule is met, not yet met or waiting as you type: a filled check, an outlined cross or an empty ring, drawn in foreground weights with a word for screen readers, so no state depends on colour. The form is the demo and the explanation at once, and the Shine Button is the only element in your primary colour. For identity, auth and sign-up products that want the form to sell the experience.
FAQ
How do I change the rules?
RULES lists each rule's id and label, and holds (with verdictOf) is the one place that tests them against the form. Add a rule by adding a row to RULES and a branch to holds; the count, the strength meter, the checklist and the submit gate all follow. The strength meter counts the five password rules, not the match rule, because matching says nothing about strength.
What are the three states of a rule?
A rule is met, not yet met, or waiting. Waiting means there is nothing to judge yet: the password is empty, the confirmation is empty, or the email is too short to test against. A met rule is a filled foreground circle with a check, a rule that isn't met is an outlined circle with a cross, and a waiting rule is an empty ring with muted text. Each also carries a visually hidden word ("Met", "Not yet", "Waiting") after its label.
When can the form be submitted?
Only when all six rules are met. Until then the Shine Button is disabled. Submitting shows "Account created. Check your inbox." in a status line that keeps its height, and editing any field clears it. Nothing is sent: replace submit with your real call. Real validation always belongs on your server too.
How do screen readers and keyboards handle it?
Every field has a visible label, the password fields point to the rules list with aria-describedby, and the confirmation is marked invalid while it differs from the password. A polite status line announces "4 of 6 rules met" when you leave a password field, not on every keystroke. The show and hide buttons are named and keyboard-operable.