GOV.UK elements Form elements

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

Contents:

Optional and mandatory fields

Labels


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


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

Focus

  • #FFBF47
  • $focus-colour

Hint text


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


  
    <!-- 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.


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


  
    <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

Inline radio buttons

Do you already have a personal user account?


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

or


  
    <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


  
    <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

Stacked checkboxes

Which types of waste do you transport regularly?

Select all that apply

  
    <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


  
    <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

Radio buttons

Choose an option below to see how this works.

How do you want to be contacted?

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


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

  
    <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

Examples