Different UI patterns for displaying form validation errors. Choose the pattern that best fits your UX requirements.

1. Inline Field Errors

The most common pattern. Error messages appear directly below each field. Best for forms where users need immediate field-level feedback.

Please enter a valid email address
Password must be at least 8 characters
Username is available
Consider adding country code for international format
Usage: Add pa-form-group--error to the form group and pa-form-help--error to the help text.

2. Summary Block (Top of Form)

All errors collected in a single alert at the top. Good for accessibility and giving users a quick overview of all issues.

Best Practice: Combine summary block with inline errors for maximum accessibility. Screen readers can announce all errors at once.

3. Combined: Summary + Inline (Recommended)

The best of both worlds. Summary for overview, inline for specific guidance. Most accessible approach.

Invalid card number format. Please use 16 digits.
Valid
Must be 3 or 4 digits
Tip: Make summary items clickable links that jump to the relevant field using anchor IDs.

4. Border + Icon Only (Minimal)

Space-efficient but less informative. Red border and icon indicate error without text message. User must infer the issue or hover/click for details.

!
!
✓
Caution: This pattern provides poor accessibility. Consider using tooltips or aria-describedby for screen readers.

5. Right-side Indicators

Error text positioned to the right of the input. Works well in horizontal form layouts with more screen real estate.

Company name is required
Please enter a valid URL (e.g., https://example.com)
✓ Valid selection

6. Helper Text Transforms to Error

Helper text below the field transforms into error text when validation fails. Maintains consistent spacing.

7. Toast Notifications

Validation errors shown as toast notifications. Best for submit-level errors or async validation (e.g., server-side checks).

Toast preview (normally appears in corner):

Note: Toasts are ephemeral. Don't use them as the only validation feedback - users may miss them.

8. Validation Timing Strategies

When to trigger validation affects user experience significantly.

On Input (Real-time)

Type to see validation
Validates as user types. Can feel aggressive.

On Blur (Recommended)

Click away to validate
Validates when field loses focus. Good balance.

On Submit

Submit to validate
All errors shown at once on submit. Traditional approach.

9. Multi-field / Cross-field Validation

When validation depends on multiple fields (e.g., password confirmation, date ranges).

Min 8 chars, uppercase, number, special char
Re-enter your password

10. Progressive Validation (Multi-step Forms)

Validate each step before allowing progression. Prevents users from reaching the end with invalid data.

1

Account

2

Profile

3

Confirm

Display name is required
Valid URL

CSS Classes Reference

Form Group States

  • pa-form-group--success - Success state (green)
  • pa-form-group--warning - Warning state (yellow/orange)
  • pa-form-group--error - Error state (red)

Input States

  • pa-input--success - Success border on input
  • pa-input--warning - Warning border on input
  • pa-input--error - Error border on input

Help/Message Text

  • pa-form-help - Base help text styling
  • pa-form-help--success - Green help text
  • pa-form-help--warning - Yellow/orange help text
  • pa-form-help--error - Red help text

Alert Variants (for Summary Blocks)

  • pa-alert pa-alert--danger - Error summary block
  • pa-alert pa-alert--warning - Warning summary block
  • pa-alert pa-alert--success - Success message block
  • pa-alert pa-alert--info - Info message block

Text Utility Classes

  • text-danger - Red text color
  • text-warning - Yellow/orange text color
  • text-success - Green text color
  • text-muted - Muted/gray text color
© 2026 KeenMate
v1.0.0-rc.2

John Doe

Administrator
  • Dashboard
  • Forms

Settings

Sidebar
Display
Profile Panel
Body text size. All elements scale proportionally.