Light
We'll only write when there's news.
Enter a 5-digit postcode.
Dark
We'll only write when there's news.
Enter a 5-digit postcode.
<div class="tl-field">
<label class="tl-field__label" for="email">Email</label>
<input class="tl-input" id="email" type="email" aria-describedby="email-help">
<span class="tl-field__help" id="email-help">We'll only write when there's news.</span>
</div>
<!-- Error: set aria-invalid on the input; the help text turns red and gains an icon -->
<input class="tl-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.
Figma: Text input component set, 10 variants (State × Content), with Label, Placeholder, Value, Helper and Show helper properties.