• Visual Language
  • Forms

Input with error

Usage notes

Within the error message, Avoid words such as 'error', 'problem' or 'issue'. Be positive.

Valid HTML5 form elements should be used (for example here type="email" is used) so that the the browser is given hints as to the nature of the input field, so that the appropriate keyboard layout is used.

 
<label class="field field--spaced field--text field--error">
  <b class="field__label">Email account</b>
  <input class="input input--med" type="email" value="email@notcorrect dot biz">
  <span class="field__description field--error__message">
    Error messsagey lorem ipsumy
  </span>
</label>

Developer Notes

The inclusion of the class field--error on the label will present the input element as having an error. Use of the field--error__message should be used to ensure the user understands why the input isn't valid.