Error Message

Use error messages to tell users when they have made an error completing a form field. Always use them alongside an error summary at the top of the page.

When to Use

• When a user has made a validation error on a form field
• Always use with an error summary component
• Display the message directly below the label, above the input

Default Error Message

<div class="form-group form-group-error">
  <label class="form-label" for="name">Full name</label>
  <p class="error-message" id="name-error">
    <span class="visually-hidden">Error:</span> Enter your full name
  </p>
  <input
    class="form-input form-input-error"
    id="name"
    name="full-name"
    type="text"
    aria-describedby="name-error"
  >
</div>

With Hint Text

When a field has hint text, place the error message between the hint and the input.

<div class="form-group form-group-error">
  <label class="form-label" for="nin">National ID number</label>
  <p class="form-hint" id="nin-hint">
    It's on your National ID card. For example, KA-123456-A.
  </p>
  <p class="error-message" id="nin-error">
    <span class="visually-hidden">Error:</span> Enter a National ID number in the correct format
  </p>
  <input
    class="form-input form-input-error form-input-width-10"
    id="nin"
    name="national-id"
    type="text"
    aria-describedby="nin-hint nin-error"
  >
</div>

With Checkboxes or Radios

Accessibility

• Include <span class="visually-hidden">Error:</span> so screen readers announce it as an error
• Use aria-describedby on the input to associate it with the error message
• If the field also has hint text, include both IDs in aria-describedby
• The error message and input should have matching IDs for linking from the error summary

Styling

• Error messages use Kaharagian Red (#D4351C) text colour
• The form group gets a 4px red left border
• Input fields get a 4px red border on all sides
• These visual indicators help users quickly identify problem fields