GOV.UK elements Form elements

Keep forms as simple as possible – only ask what’s needed to run your service.

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
labels should be associated with form fields using the for attribute

Full name


  
    <div class="form-group">
  <label class="form-label" for="full-name-f1">Full name</label>
  <input class="form-control" id="full-name-f1" type="text" name="full-name-f1">
</div>

Form fields

Make field widths proportional to the input they take.

Ensure that users can enter the information they need at smaller screen sizes.

Snap form fields to 100% width at smaller screen sizes.

Discuss form fields on Dropbox Paper

Textarea

Make the height of a textarea proportional to the amount of text to be entered.

Why can't you provide a National Insurance number?


  
    <div class="form-group">
  <label class="form-label" for="textarea">
    Why can't you provide a National Insurance number?
  </label>
  <textarea class="form-control form-control-3-4" name="textarea" id="textarea" rows="5"></textarea>
</div>

Form focus states

All elements use the yellow focus style as a highlight, as either a fill or 3px outline.

Click on the label “Full name” or inside the form field to show the focus state.

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

National Insurance number It's on your National Insurance card, benefit letter, payslip or P60.
For example, ‘QQ 12 34 56 C’.


  
    <div class="form-group">
  <label class="form-label" for="ni-number">
    National Insurance number
    <span class="form-hint">
      It's on your National Insurance card, benefit letter, payslip or P60.
      <br>
      For example, ‘QQ 12 34 56 C’.
    </span>
  </label>
  <input class="form-control" id="ni-number" type="text" name="ni-number">
</div>

Spacing between form elements

Ensure there is sufficient spacing between form elements.

First name

Last name


  
    <!-- Use .form-group to create spacing when wrapping label and input pairs -->
<div class="form-group">
  <label class="form-label" for="first-name-2">First name</label>
  <input class="form-control" id="first-name-2" name="first-name-2" type="text">
</div>
<div class="form-group">
  <label class="form-label" for="last-name-2">Last name</label>
  <input class="form-control" id="last-name-2" name="last-name-2" type="text">
</div>

File upload

A control that lets the user select a file.

Upload a file


  
    <div class="form-group">
  <label class="form-label" for="file-input">
    Upload a file
  </label>
  <input type="file" id="file-input">
</div>

We recommend using a native input using type="file", rather than a custom implementation.

This is so:

the control gains focus when tabbing through the page
the control functions using a keyboard
the control functions using assistive technology
the control functions when javascript is not available

A custom implementation of this control would need to meet the criteria above.

Fieldsets and legends

Use fieldsets to group related form controls. The first element inside a fieldset must be a legend element which describes the group.

Any general text which is important for filling in the form and cannot be put into a hint, should be in that legend (as shown in the checkbox example). But the legend shouldn't be too long either.

Select boxes

Avoid using select boxes (drop-down lists) - use radio buttons or checkboxes instead.

This is the label text


  
    <div class="form-group">
  <label class="form-label" for="select-box">This is the label text</label>
  <select class="form-control" id="select-box" name="select-box">
    <option>GOV.UK elements option 1</option>
    <option>GOV.UK elements option 2</option>
    <option>GOV.UK elements option 3</option>
  </select>
</div>

Discuss select boxes on Dropbox Paper

Radio buttons

use these to let users choose a single option from a list
for more than two options, radio buttons should be stacked
radio buttons with large hit areas are easier to select with a mouse or touch devices

Inline radio buttons

Do you already have a personal user account?

Yes


  
    <div class="form-group">
  <fieldset class="inline">

    <legend>
      <h1 class="heading-medium">
        Do you already have a personal user account?
      </h1>
    </legend>

    <div class="multiple-choice">
      <input id="radio-inline-1" type="radio" name="radio-inline-group" value="Yes">
      <label for="radio-inline-1">Yes</label>
    </div>
    <div class="multiple-choice">
      <input id="radio-inline-2" type="radio" name="radio-inline-group" value="No">
      <label for="radio-inline-2">No</label>
    </div>

  </fieldset>
</div>

Stacked radio buttons

Where do you live?

Northern Ireland

Isle of Man or the Channel Islands

I am a British citizen living abroad


  
    <div class="form-group">
  <fieldset>

    <legend>
      <h1 class="heading-medium">Where do you live?</h1>
    </legend>

    <div class="multiple-choice">
      <input id="radio-1" type="radio" name="radio-group" value="Northern Ireland">
      <label for="radio-1">Northern Ireland</label>
    </div>
    <div class="multiple-choice">
      <input id="radio-2" type="radio" name="radio-group" value="Isle of Man or the Channel Islands">
      <label for="radio-2">Isle of Man or the Channel Islands</label>
    </div>
    <p class="form-block">or</p>
    <div class="multiple-choice">
      <input id="radio-3" type="radio" name="radio-group" value="I am a British citizen living abroad">
      <label for="radio-3">I am a British citizen living abroad</label>
    </div>

  </fieldset>
</div>

Disabled radio buttons

Isle of Man or the Channel Islands


  
    <div class="form-group">
  <div class="multiple-choice">
    <input id="radio-disabled-example" type="radio" name="radio-disabled-group" value="Isle of Man or the Channel Islands" disabled>
    <label for="radio-disabled-example">Isle of Man or the Channel Islands</label>
  </div>
</div>

Checkboxes

use these to select either on/off toggles or multiple selections
make it clear with words when users can select one or multiple options

Stacked checkboxes

Which types of waste do you transport regularly?

Select all that apply

Waste from animal carcasses

Waste from mines or quarries

Farm or agricultural waste


  
    <div class="form-group">
  <fieldset>

    <legend>
      <h3 class="heading-medium">Which types of waste do you transport regularly?</h3>
      <span class="body-text">Select all that apply</span>
    </legend>

    <div class="multiple-choice">
      <input id="waste-type-1" name="waste-types" type="checkbox" value="waste-animal">
      <label for="waste-type-1">Waste from animal carcasses</label>
    </div>
    <div class="multiple-choice">
      <input id="waste-type-2" name="waste-types" type="checkbox" value="waste-mines">
      <label for="waste-type-2">Waste from mines or quarries</label>
    </div>
    <div class="multiple-choice">
      <input id="waste-type-3" name="waste-types" type="checkbox" value="waste-farm-agricultural">
      <label for="waste-type-3">Farm or agricultural waste</label>
    </div>

  </fieldset>
</div>

Disabled checkboxes

Farm or agricultural waste


  
    <div class="form-group">
  <div class="multiple-choice">
    <input id="checkbox-disabled-example" name="checkbox-disabled-group" type="checkbox" value="waste-farm-agricultural" disabled>
    <label for="checkbox-disabled-example">Farm or agricultural waste</label>
  </div>
</div>

Only pre-select options if there’s a strong, user-centred reason to.


  
    <div class="form-group">
  <label class="form-label" for="telephone-number">Enter your telephone number</label>
  <input class="form-control" id="telephone-number" name="telephone-number" type="tel">
</div>
<div class="form-group">
  <div class="multiple-choice">
    <input id="checkbox-telephone-number" name="contact-by-text-phone" type="checkbox" value="true">
    <label for="checkbox-telephone-number">I need to be contacted using a text phone</label>
  </div>
</div>

Discuss radio buttons and checkboxes on Dropbox Paper

Conditionally revealing content

reveal additional questions, depending on the context
a left border is used to emphasise this supporting information

Radio buttons

Choose an option below to see how this works.

How do you want to be contacted?

Email address

Phone

Phone number

Text message

Mobile phone number

  
    
      <div class="form-group">
  <fieldset>

    <legend>
      <h1 class="heading-medium">
        How do you want to be contacted?
      </h1>
    </legend>

    <div class="multiple-choice" data-target="contact-by-email">
      <input id="example-contact-by-email" type="radio" name="radio-contact-group" value="Yes">
      <label for="example-contact-by-email">Email</label>
    </div>
    <div class="panel panel-border-narrow js-hidden" id="contact-by-email">
      <label class="form-label" for="contact-email">Email address</label>
      <input class="form-control" name="contact-email" type="text" id="contact-email">
    </div>

    <div class="multiple-choice" data-target="contact-by-phone">
      <input id="example-contact-by-phone" type="radio" name="radio-contact-group" value="No">
      <label for="example-contact-by-phone">Phone</label>
    </div>
    <div class="panel panel-border-narrow js-hidden" id="contact-by-phone">
      <label class="form-label" for="contact-phone">Phone number</label>
      <input class="form-control" name="contact-phone" type="tel" id="contact-phone">
    </div>

    <div class="multiple-choice" data-target="contact-by-text">
      <input id="example-contact-by-text" type="radio" name="radio-contact-group" value="No">
      <label for="example-contact-by-text">Text message</label>
    </div>
    <div class="panel panel-border-narrow js-hidden" id="contact-by-text">
      <label class="form-label" for="contact-text-message">Mobile phone number</label>
      <input class="form-control" name="contact-text-message" type="text" id="contact-text-message">
    </div>

  </fieldset>
</div>

In the code snippet above, the data-target="" attribute is present on every label, as each option reveals an extra field.

A grey left hand border is used to visually connect the revealed content with the question above.

Mobile phone number


  
    <div class="form-group">
  <div class="panel panel-border-narrow">
    <label class="form-label" for="example-phone-number">Mobile phone number</label>
    <input class="form-control" id="example-phone-number" name="example-phone-number" type="tel">
  </div>
</div>

The inset text section has more information on where and how to use panels (content with a grey left hand border).

Checkboxes

Click on "Citizen of a different country" to see how this works.

What is your nationality?

Select all options that are relevant to you.

British (including English, Scottish, Welsh and Northern Irish)

Irish

Citizen of a different country

Country name


  
    <div class="form-group">
  <fieldset>

    <legend>
      <h1 class="heading-medium">
        What is your nationality?
      </h1>
      <span class="body-text">Select all options that are relevant to you.</span>
    </legend>

    <div class="multiple-choice">
      <input id="nationalities-british" name="nationalities" type="checkbox" value="British">
      <label for="nationalities-british">British (including English, Scottish, Welsh and Northern Irish)</label>
    </div>
    <div class="multiple-choice">
      <input id="nationalities-irish" name="nationalities" type="checkbox" value="Irish">
      <label for="nationalities-irish">Irish</label>
    </div>
    <div class="multiple-choice" data-target="example-different-country">
      <input id="nationalities-other" name="nationalities" type="checkbox" value="Citizen of a different country">
      <label for="nationalities-other">Citizen of a different country</label>
    </div>
    <div class="panel panel-border-narrow js-hidden" id="example-different-country">
      <label class="form-label" for="nationalities-other-country">Country name</label>
      <input class="form-control" type="text" id="nationalities-other-country" name="nationalities-other-country">
    </div>

  </fieldset>
</div>

Discuss conditional form fields on Dropbox Paper

GOV.UK Elements has now been replaced by the GOV.UK Design System

GOV.UK elements Form elements

Contents:

Optional and mandatory fields

Labels

Form fields

Textarea

Form focus states

Focus

Hint text

Spacing between form elements

File upload

Fieldsets and legends

Select boxes

Radio buttons

Inline radio buttons

Do you already have a personal user account?

Stacked radio buttons

Where do you live?

Disabled radio buttons

Checkboxes

Stacked checkboxes

Which types of waste do you transport regularly?

Disabled checkboxes

Conditionally revealing content

Radio buttons

How do you want to be contacted?

Checkboxes

What is your nationality?

Examples