Search blocks by description or jump to a page.
Blueprint showing valid, invalid, and warning field states side by side with actionable error copy guidance.
The source for every Application block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? 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.