shadcn.io is not affiliated with official shadcn/ui
Form Validation Checklist Features Block for React
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 React with Base 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.
Related
- Pro
Inset Border Card Grid Features
Live controlsSix ring-inset preference cells for a team-settings app, each holding one working control: a switch, a slider, a toggle group, a select, a checkbox and a segmented control.
- Pro
Large Headline Side Checklist Features
Headline-ledA feature section for an onboarding tool with a large headline on the start side and a card-in-card setup checklist beside it, whose real checkboxes drive a progress meter and a spoken count.
- Pro
Split Signup Form Hero
Signup and waitlistA split hero with a sign-up form on the page: copy and ticks at the start, and a card in card form at the end with a work email, a password and a Shine Button that shows a spinner, then a confirmation.
- Pro
Eligibility Capture CTA
Forms and captureA reverse split call to action that follows the page theme: a framed form with an email field that checks the address as you type and says whether it qualifies, and a Shine Button that stays unavailable, and explains why, until it does.
- Pro
Downgrade Confirmation Billing
Upgrade and downgradeA downgrade that shows what it costs first: the limits that shrink, the folders now over the smaller plan's storage with a checkbox to archive each and a live meter, the day it takes effect, and an alert dialog that asks for a typed word.
- Pro
Added Removed Diff List Features
App screensA unified diff of one config file in a hairline frame, with + and - gutters in foreground weights, one caption beside each hunk, folded runs of unchanged lines that open in place, and a footer counting the changes.