- don’t hide labels, unless the surrounding context makes them unnecessary
- labels should be aligned above their fields
- label text should be short, direct and in sentence case
- avoid colons at the end of labels
Back to components
Label
All form fields should be given labels.
Contents
Example
HTML Snippet for label
<div class="form-group">
<label class="form-label" for="full-name">Full name</label>
<input class="form-control" id="full-name" type="text" name="full-name">
</div>Hint text
- don’t use placeholder text in form fields, as this will disappear once content is entered into the form field
- use hint text for supporting contextual help, this will always be shown
- hint text should sit above a form field
Example
HTML Snippet for hint text
<div class="form-group">
<label class="form-label form-label-bold form-label-large" for="ct-number">
Your council tax number
<span class="form-hint">
This can be found on your bill.
<br>
For example, CT041116
</span>
</label>
<input class="form-control" id="ct-number" type="text" name="ct-number">
</div>