BETA This is a new service — your feedback will help us to improve it.

Back to components


All form fields should be given labels.

  • 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

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">

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

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.
        For example, CT041116
    <input class="form-control" id="ct-number" type="text" name="ct-number">
Back to top