Dark
Department addresses only.
Enter DI followed by four digits.
Light
Department addresses only.
Enter DI followed by four digits.
<div class="doi-field">
<label class="doi-field__label" for="email">Email</label>
<input class="doi-input" id="email" type="email" aria-describedby="email-help">
<span class="doi-field__help" id="email-help">Department addresses only.</span>
</div>
<!-- Error: set aria-invalid on the input; the help text turns red and gains an icon -->
<input class="doi-input" aria-invalid="true" …>States
DefaultHelper text
HoverHelper text
FocusHelper text
ErrorHelper text
DisabledHelper text
Guidelines
Do
Always show a visible label. Put formatting hints in the help text before someone gets it wrong.
Don't
Use placeholder text as the label; it disappears as soon as someone starts typing.