UX Patterns Guide
Back to compare picker

Inline validation vs Error summary

Use inline validation when the user can fix one field locally before page-level recovery is needed.

Inline validation live exampleError summary live example

Decision dimensions

Dimension Inline validationError summary
UI or UX UI + UX - Field-level validation feedbackUI + UX - Form recovery summary
UI guidance Render a labeled field with hint text, field-adjacent error text, invalid styling, preserved value, and corrected state.Render a top-of-form summary block with heading, linked error list, and matching field-level error messages.
UX guidance Help users correct a specific field without losing or re-entering the value they already typed.Help users recover from one or more submitted-form errors without scanning the entire page.
Good UI Error text appears next to the field with readable spacing, persistent label, hint text, and the invalid value still visible.Top-of-form summary with a clear heading, linked error list, and matching inline field messages.
Bad UI Only a red border with no message.Red banner saying fix errors with no links.
Good UX Validation appears after blur or submit when it helps correction.After failed submit, focus or reading order makes the summary discoverable before users scan the form.
Bad UX Showing errors before users type.Only showing errors below the fold.
Best fit A single field has a specific correctable problem.Form submission can produce one or more errors.
Avoid when The main recovery task is finding several errors across a submitted page.A single local field issue can be corrected before submit without page-level orientation.
Required state Neutral field with label, hint, and no error.Neutral form before submit with no summary.
Accessibility burden Expose invalid state on the input and connect error text to the field description where possible.Use a heading and alert behavior that makes the summary discoverable.
Common misuse Showing field errors before users have interacted with the control.Showing a red banner or toast with no links to the invalid answers.

Inline validation

UI or UX
UI + UX - Field-level validation feedback
UI guidance
Render a labeled field with hint text, field-adjacent error text, invalid styling, preserved value, and corrected state.
UX guidance
Help users correct a specific field without losing or re-entering the value they already typed.
Good UI
Error text appears next to the field with readable spacing, persistent label, hint text, and the invalid value still visible.
Bad UI
Only a red border with no message.
Good UX
Validation appears after blur or submit when it helps correction.
Bad UX
Showing errors before users type.
Best fit
A single field has a specific correctable problem.
Avoid when
The main recovery task is finding several errors across a submitted page.
Required state
Neutral field with label, hint, and no error.
Accessibility burden
Expose invalid state on the input and connect error text to the field description where possible.
Common misuse
Showing field errors before users have interacted with the control.

Error summary

UI or UX
UI + UX - Form recovery summary
UI guidance
Render a top-of-form summary block with heading, linked error list, and matching field-level error messages.
UX guidance
Help users recover from one or more submitted-form errors without scanning the entire page.
Good UI
Top-of-form summary with a clear heading, linked error list, and matching inline field messages.
Bad UI
Red banner saying fix errors with no links.
Good UX
After failed submit, focus or reading order makes the summary discoverable before users scan the form.
Bad UX
Only showing errors below the fold.
Best fit
Form submission can produce one or more errors.
Avoid when
A single local field issue can be corrected before submit without page-level orientation.
Required state
Neutral form before submit with no summary.
Accessibility burden
Use a heading and alert behavior that makes the summary discoverable.
Common misuse
Showing a red banner or toast with no links to the invalid answers.
Decision rules
  • Use inline validation when the user can fix one field locally before page-level recovery is needed.
  • Use an error summary when submit-time validation leaves errors across a page or step and users need a linked overview.
  • Combine both after failed submit so the summary helps users find errors and inline messages explain each local correction.
Inspect live examples
Inline validationError summary
Failure modes
  • Showing only color or icons without text.
  • Putting all errors at the top without linking to the affected fields.
  • Interrupting typing with premature validation messages.