There is an update to the GOV.UK Prototype kit which may affect how your prototype works if you are not using the latest version. Contact #team-plat-ui on HMRC Slack (open in app) if you need more information or support.

Ask the user for their consent

This pattern asks the user for their consent when we collect and store personal data. The pattern meets our responsibilities under the General Data Protection Regulation 2018 (GDPR) and Data Protection Act 2018 (DPA).

When to use

Use this pattern to ask the user for their consent when you collect and store personal data.

Personal data is anything that on its own, or together with other data, can identify a person.

If the data you are asking for is not needed for government to perform a specific task or function set out in law, you need to ask for consent. For example, data needed to apply or register for something.

When to not use

If the data is required for government to perform a specific task or function set out in law, you do not need to ask for consent. For example, terms and conditions – these are required so you do not need to ask for consent.

Design content that includes the terms and conditions as part of selecting a button, instead of adding in a checkbox.

How it works

Do not infer consent when someone uses a service or does nothing. Consent must be:

  • freely given
  • a positive action to opt-in
  • clear, concise and specific
  • separate from other terms and conditions
  • as easy to withdraw as it is to give

Read more about consent on the Information Commissioner’s Office website.

Do not pre-select radio buttons and checkboxes for the user. This means the positive action would opt-out.

Consent covers all activities done for the same reason. If you use the data for more than one reason, get separate consent for each.

Ask a yes-no question

            <div class="govuk-form-group">
  <fieldset class="govuk-fieldset">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--xl">
      <h1 class="govuk-fieldset__heading">
        Do you want to get electronic communications instead of letters from HMRC?
      </h1>
    </legend>
    <div class="govuk-radios govuk-radios--inline">
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="paperless" name="paperless" type="radio" value="yes">
        <label class="govuk-label govuk-radios__label" for="paperless">
          Yes
        </label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="paperless-2" name="paperless" type="radio" value="no">
        <label class="govuk-label govuk-radios__label" for="paperless-2">
          No
        </label>
      </div>
    </div>
  </fieldset>
</div>

<button class="govuk-button" data-module="govuk-button">
  Continue
</button>
          
              {% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}

{{ govukRadios({
  classes: "govuk-radios--inline",
  idPrefix: "paperless",
  name: "paperless",
  fieldset: {
    legend: {
      text: "Do you want to get electronic communications instead of letters from HMRC?",
      isPageHeading: true,
      classes: "govuk-fieldset__legend--xl"
    }
  },
  items: [
    {
      value: "yes",
      text: "Yes"
    },
    {
      value: "no",
      text: "No"
    }
  ]
}) }}

{{ govukButton({
  text: "Continue"
}) }}
            

Use a single checkbox

            <div class="govuk-form-group">
  <label class="govuk-label" for="access-code">
    Access code
  </label>
  <input class="govuk-input govuk-input--width-10" id="access-code" name="access-code" type="text">
</div>

<div class="govuk-form-group">
  <div class="govuk-checkboxes">
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="access-code-7-days" name="access-code-7-days" type="checkbox" value="Keep for 7 days">
      <label class="govuk-label govuk-checkboxes__label" for="access-code-7-days">
        Remember this access code for 7 days
      </label>
    </div>
  </div>
</div>

<button class="govuk-button" data-module="govuk-button">
  Continue
</button>
          
              {% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{% from "govuk/components/input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "Access code"
  },
  id: "access-code",
  name: "access-code",
  classes: "govuk-input--width-10"
}) }}

{{ govukCheckboxes({
  idPrefix: "access-code-7-days",
  name: "access-code-7-days",
  items: [
    {
      value: "Keep for 7 days",
      text: "Remember this access code for 7 days"
    }
  ]
}) }}

{{ govukButton({
  text: "Continue"
}) }}
            

Use more than one checkbox

For when there is more than one type of consent or consent must be separate from other terms and conditions.

            <div class="govuk-form-group">
  <fieldset class="govuk-fieldset">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--xl">
      <h1 class="govuk-fieldset__heading">
        Select your preferences
      </h1>
    </legend>
    <div class="govuk-checkboxes">
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" id="mixed" name="mixed" type="checkbox" value="paperless">
        <label class="govuk-label govuk-checkboxes__label" for="mixed">
          I want to get electronic communications instead of letters from HMRC
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" id="mixed-2" name="mixed" type="checkbox" value="access-code-7-days">
        <label class="govuk-label govuk-checkboxes__label" for="mixed-2">
          Remember this access code for 7 days
        </label>
      </div>
    </div>
  </fieldset>
</div>

<button class="govuk-button" data-module="govuk-button">
  Continue
</button>
          
              {% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  idPrefix: "mixed",
  name: "mixed",
  fieldset: {
    legend: {
      text: "Select your preferences",
      isPageHeading: true,
      classes: "govuk-fieldset__legend--xl"
    }
  },
  items: [
    {
      value: "paperless",
      text: "I want to get electronic communications instead of letters from HMRC"
    },
    {
      value: "access-code-7-days",
      text: "Remember this access code for 7 days"
    }
  ]
}) }}
{{ govukButton({
  text: "Continue"
}) }}
            

Research

We need more research. If you have asked the user for their consent, get in touch to share your research findings.

Discuss ask the user for their consent on GitHub