Skip to main content

Form errors

Error display patterns for form validation with accessible markup.

Form-level errors

Display validation errors at the top of a form.

2 errors were found:

  • Name can't be blank
  • Email is invalid
<div class="l-ui-form__errors">
  <h3>2 errors were found:</h3>
  <ul class="l-ui-form__errors-list mt-4">
    <li>Name can't be blank</li>
    <li>Email is invalid</li>
  </ul>
</div>

Field-level errors

This email is already registered
Password must be at least 8 characters 
<div class="l-ui-form__group">
  <label class="l-ui-label" for="email">Email</label>
  <div class="field_with_errors">
    <input type="email" class="l-ui-form__field">
  </div>
  <span class="l-ui-form__field-error">Error message</span>
</div>

Rails integration

The engine includes partials for rendering errors with Rails form builders:

<!-- Form-level errors -->
<%= render "layered_ui/shared/form_errors", resource: @user %>

<!-- Field-level error -->
<%= render "layered_ui/shared/field_error",
    resource: @user, attribute: :email %>

CSS classes

Form error CSS classes
Class Description
l-ui-form__errors Container for form-level errors
l-ui-form__errors-list List of error messages
field_with_errors Rails default wrapper (styled by engine)
l-ui-form__field-error Inline field error message