Skip to main content

Error message

Information: Documentation incomplete

This component still requires documentation.

Use the error message component to tell users if there has been a validation error.

Example

Default

Open example in a new window
View HTML 
<div class="uhb-c-form-group">
  <label class="uhb-c-label" for="first-name">
    What is your first name?
  </label>
  <span class="uhb-c-error-message" id="first-name-error">
    <span class="uhb-u-visually-hidden">Error: </span>Enter your first name
  </span>
  <input class="uhb-c-input uhb-c-input--error" id="first-name" name="first-name" type="text" aria-describedby="first-name-error">
</div>