Inline Validation Fields
Form showing all three live validation states side by side: a valid field with a checkmark, a checking field with a spinner, and an error field with a corrective message.
Form showing all three live validation states side by side: a valid field with a checkmark, a checking field with a spinner, and an error field with a corrective message.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Inline Validation Fields is the validation-states reference form, showing all three feedback states simultaneously in a Create your account card. The work email field (avery@acme.com) shows a quiet checkmark and a label-row Valid note. The username field (avery) shows a spinning Loader2 and a Checking availability note with aria-busy set. The password field is in error state with aria-invalid and a concrete corrective message: Password must be at least 12 characters. You have 6. Add 6 more and include one special character such as ! # $ or %.
All three states are static markup with no toggle, so the pattern reads without interaction. The footer note carries the house rule: errors describe what to fix, never what the user did wrong.
Drop this block into onboarding or signup flows as the reference implementation for your validation system. Wire the valid/checking/error state to your form library, then copy the icon placement and message pattern to all other form fields in the product.
A natural flow around it on an Application Pro page:
Before
After
One strong use is a signup form validation reference. Other inline validation contexts:
Tip: a checking spinner with aria-busy is what prevents users submitting before the async check completes.