Form Validation
Touch-on-blur validation pattern with visual states (default, focused, error, success, disabled) and inline error messages.
States
Each state has a distinct visual treatment. Error and success states include helper text below the field.
Default
Type a value.
Focus
Tab or tap here to see the actual focus state.
Email
Please enter a valid email address.
Disabled
Unavailable fields cannot be edited.
Validation lifecycle
Touch-on-blur: validate when the field loses focus (not on every keystroke). Show errors inline. Clear errors as the user corrects them.
Anatomy. 1. User focuses field. 2. User types and leaves (blur). 3. If invalid, show error state + message. 4. On next keystroke, re-validate live until valid. 5. Confirm valid input through Field’s helper text.
Try touch-on-blur
Demo only. Nothing is sent or stored.
Email
Validation starts when you leave the field.
Example form
A sign-in form demonstrating error states with inline helper text.
Sign in to Acme Corp
Demo only. Nothing is sent or stored.
Email
Validation starts when you leave the field.
Password
Use at least 8 characters.
Production stack
In production, a form-state library such as react-hook-form can own values and touched state, while a schema library such as zod validates them. Pass the resulting error through Field; Canvas owns the visual and accessible field anatomy.