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


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

  

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 the design patterns Hackpad

Textarea

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


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

  

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


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

  

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 the design patterns Hackpad

Radio buttons

Inline radio buttons

Do you already have a personal user account?


  
    <form>
  <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>
</form>

  

Stacked radio buttons

Where do you live?

or


  
    <form>
  <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>
</form>

  

Disabled radio buttons


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

  

Checkboxes

Stacked checkboxes

Which types of waste do you transport regularly?

Select all that apply

  
    <form>
  <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>
</form>

  

Disabled checkboxes


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

  

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="text">
</div>
<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>

  

Discuss radio buttons and checkboxes on the design patterns Hackpad

Conditionally revealing content

Radio buttons

Choose an option below to see how this works.

How do you want to be contacted?

  
    
      <form>
  <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="text" 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>
</form>

    
  
  

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="text">
  </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.

  
    <form>
  <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>
</form>

  

Discuss conditional form fields on the design patterns Hackpad

Examples