Forms › GOV.UK Elements

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

Optional and mandatory fields

only ask for the information you absolutely need
if you do ask for optional information, mark the labels of optional fields with '(optional)'
don't mark mandatory fields with asterisks

Labels

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-1">Full name</label><input class="form-control" id="full-name-1" type="text" />
</div>

div.form-group

label.form-label for="full-name-1" Full name

input#full-name-1.form-control type="text"

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.

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.

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.

Full name


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

div.form-group

label.form-label for="full-name-2" Full name

input#full-name-2.form-control type="text"

Spacing between form elements

Ensure there is sufficient spacing between form elements.

First name

Last name


<div class="form-group">
  <label class="form-label" for="first-name">First name</label><input class="form-control" id="first-name" type="text" />
</div>
<div class="form-group">
  <label class="form-label" for="last-name">Last name</label><input class="form-control" id="last-name" type="text" />
</div>

div.form-group

label.form-label for="first-name" First name

input#first-name.form-control type="text"

div.form-group

label.form-label for="last-name" Last name

input#last-name.form-control type="text"

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'll be on your last payslip. For example, JH 21 90 0A.


<div class="form-group">
  <label class="form-label" for="ni-number">National Insurance number</label>
  <div class="form-hint">
    It'll be on your last payslip. For example, JH 21 90 0A.
  </div>
  <input class="form-control" id="ni-number-2" type="text" />
</div>

div.form-group

label.form-label for="ni-number" National Insurance number

div.form-hint It'll be on your last payslip. For example, JH 21 90 0A.

input#ni-number-2.form-control type="text"

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

YesNo

Isolate


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

div.form-group.inline

label.block-label for="radio-inline-1" Yes

input#radio-inline-1 name="radio-inline-group" type="radio" value="Yes"

label.block-label for="radio-inline-2" No

input#radio-inline-2 name="radio-inline-group" type="radio" value="No"

Northern IrelandIsle of Man or the Channel Islands

I am a British citizen living abroad

Isolate

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

label.block-label.selected for="radio-1" Northern Ireland

input#radio-1 name="radio-group" type="radio" value="ni"

label.block-label for="radio-2" Isle of Man or the Channel Islands

input#radio-2 name="radio-group" type="radio" value="isle-of-man-channel"

p.form-block or

label.block-label for="radio-3" I am a British citizen living abroad

input#radio-3 name="radio-group" type="radio" value="british-abroad"

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

Which types of waste do you transport regularly?

Select all that apply

Waste from animal carcassesWaste from mines or quarriesFarm or agricultural waste

Isolate


<fieldset>
  <legend class="form-label-bold">Which types of waste do you transport regularly?</legend>
  <p>
    Select all that apply
  </p>
  <label class="block-label selected" for="checkbox-1"><input id="checkbox-1" type="checkbox" value="animals">Waste from animal carcasses</input></label><label class="block-label" for="checkbox-2"><input id="checkbox-2" type="checkbox" value="mines">Waste from mines or quarries</input></label><label class="block-label" for="checkbox-3"><input id="checkbox-3" type="checkbox" value="agriculture">Farm or agricultural waste</input></label>
</fieldset>

fieldset

legend.form-label-bold Which types of waste do you transport regularly?

p Select all that apply

label.block-label.selected for="checkbox-1" Waste from animal carcasses

input#checkbox-1 type="checkbox" value="animals"

label.block-label for="checkbox-2" Waste from mines or quarries

input#checkbox-2 type="checkbox" value="mines"

label.block-label for="checkbox-3" Farm or agricultural waste

input#checkbox-3 type="checkbox" value="agriculture"

Large hit areas aren't always appropriate.

Enter your telephone numberI need to be contacted using a text phone

Isolate


<div class="form-group">
  <label class="form-label" for="phone-number">Enter your telephone number</label><input class="form-control" id="phone-number" type="text" /><label class="form-checkbox" for="phone-number-checkbox"><input id="phone-number-checkbox" type="checkbox" value="1">I need to be contacted using a text phone</input></label>
</div>

div.form-group

label.form-label for="phone-number" Enter your telephone number

input#phone-number.form-control type="text"

label.form-checkbox for="phone-number-checkbox" I need to be contacted using a text phone

input#phone-number-checkbox type="checkbox" value="1"

Inset form elements

Insets can be used within forms to emphasise supporting information.

Click on "Yes" to see how this works.

Do you know their National Insurance number?

YesNo

National Insurance number

Isolate


<fieldset>
  <legend>Do you know their National Insurance number?</legend>
  <div class="form-group inline">
    <label class="block-label" for="radio-inline-11"><input id="radio-inline-11" name="radio-inline-group" type="radio" value="Yes">Yes</input></label><label class="block-label" for="radio-inline-12"><input id="radio-inline-12" name="radio-inline-group" type="radio" value="No">No</input></label>
  </div>
  <div class="panel-indent" data-control-value="Yes" data-controlled-by="radio-inline-group">
    <label class="form-label" for="ni-number-2">National Insurance number</label><input class="form-control" id="ni-number-2" type="text" />
  </div>
</fieldset>

fieldset

legend Do you know their National Insurance number?

div.form-group.inline

label.block-label for="radio-inline-11" Yes

input#radio-inline-11 name="radio-inline-group" type="radio" value="Yes"

label.block-label for="radio-inline-12" No

input#radio-inline-12 name="radio-inline-group" type="radio" value="No"

div.panel-indent data-control-value="Yes" data-controlled-by="radio-inline-group"

label.form-label for="ni-number-2" National Insurance number

input#ni-number-2.form-control type="text"

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)IrishCitizen of a different country

Country name

Isolate


<fieldset>
  <legend class="form-label-bold">What is your nationality?</legend>
  <p>
    Select all options that are relevant to you.
  </p>
  <div class="form-group">
    <label class="block-label selected" for="inset-checkbox-1"><input id="inset-checkbox-1" name="inset-checkbox" type="checkbox" value="british">British (including English, Scottish, Welsh and Northern Irish)</input></label><label class="block-label" for="inset-checkbox-2"><input id="inset-checkbox-2" name="inset-checkbox" type="checkbox" value="irish">Irish</input></label><label class="block-label" for="inset-checkbox-3"><input id="inset-checkbox-3" name="inset-checkbox" type="checkbox" value="different">Citizen of a different country</input></label>
  </div>
  <div class="panel-indent" data-control-value="different" data-controlled-by="inset-checkbox">
    <label class="form-label" for="ni-country-name-1">Country name</label><input class="form-control" id="ni-number-2" name="country-name" type="text" />
  </div>
</fieldset>

fieldset

legend.form-label-bold What is your nationality?

p Select all options that are relevant to you.

div.form-group

label.block-label.selected for="inset-checkbox-1" British (including English, Scottish, Welsh and Northern Irish)

input#inset-checkbox-1 name="inset-checkbox" type="checkbox" value="british"

label.block-label for="inset-checkbox-2" Irish

input#inset-checkbox-2 name="inset-checkbox" type="checkbox" value="irish"

label.block-label for="inset-checkbox-3" Citizen of a different country

input#inset-checkbox-3 name="inset-checkbox" type="checkbox" value="different"

div.panel-indent data-control-value="different" data-controlled-by="inset-checkbox"

label.form-label for="ni-country-name-1" Country name

input#ni-number-2.form-control name="country-name" type="text"