Form label

Notes

  • all form fields should be given labels
  • mark the labels of optional fields with ‘(optional)’
  • don’t mark mandatory fields with asterisks
  • 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
  • labels should be associated with form fields using the for attribute

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
  • ensure hint text can be read correctly by screen readers
<!-- Start: @form-label--default -->
<label class="form-label" for="">This is a form label <span class="form-hint">This is hint text</span></label>
<!-- End: @form-label--default -->
 
<label class="form-label" for="{{ id }}">{{ label }}{% if hint %} <span class="form-hint">{{ hint }}</span>{% endif %}</label>
 
{
  "@form-label--default": {
    "label": "This is a form label",
    "hint": "This is hint text"
  }
}