Validation States Form
Blueprint showing valid, invalid, and warning field states side by side with actionable error copy guidance.
Blueprint showing valid, invalid, and warning field states side by side with actionable error copy guidance.
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
Validation States Form is the design system blueprint for field feedback: one form showing all three states deliberately. The valid field (Your name, Avery Stone) is quiet, no decoration. The invalid field (Workspace name, value Ac) carries a border-foreground/40 ring and the error line: workspace names need 3 or more characters, add one more and you are set. The warning field (Invite a teammate, priya@acme.com) stays visually neutral but surfaces the conflict with a link, add them to this project instead.
No arrays; each field is unique by design to show the contrast. The footer names the rule: error copy says what to do next, never what the user did wrong.
Reach for this block when establishing or documenting validation conventions across your product. Each field maps to a pattern: wire the invalid state to your form validation library, the warning state to a membership check endpoint, and the valid state to nothing extra.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the in-app form style guide. Other validation blueprints:
Tip: warnings are not errors; keep them muted and always include a way out, like the invite link here.