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.