Switch to Wilmington
DesignDevelop
Version 4.5.1
Overview

Inline Error

The inline error component is used to indicate that required information in a user input field is missing or invalid.

Usage

Please enter your full name.
Inline Error
An inline error is a filled container that appears below an input in the error state. Inline Errors are directly attached to and affect the input field that requires correction. The message in the error container will give the user clear direction on how to resolve the error. Inline errors must always be used with the sibling input element in the error state.
<label class="c-label" for="input-1">Label Name</label>
  <input 
    type="text" 
    class="c-text-field c-text-field--error" 
    placeholder="e.g. Homer J. Simpson"
    id="input-1" />
  <span class="c-inline-error">
      <i class="icon icon--error c-inline-error__icon"></i>
      <span class="c-inline-error__content">
          Please enter your full name.
      </span>
  </span>
</div>
Copy