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

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

Open this example in a new tab Display in English Display in Welsh

HTML
Nunjucks

              <div class="govuk-form-group">
  <fieldset class="govuk-fieldset">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
      <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" data-module="govuk-radios">
      <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 type="submit" class="govuk-button" data-module="govuk-button">
  Continue
</button>

                <div class="govuk-form-group">
  <fieldset class="govuk-fieldset">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
      <h1 class="govuk-fieldset__heading">
        A hoffech gyfathrebu â CThEM drwy ddull electronig, yn hytrach nag ar bapur?
      </h1>
    </legend>
    <div class="govuk-radios govuk-radios--inline" data-module="govuk-radios">
      <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">
          Iawn
        </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">
          Na
        </label>
      </div>
    </div>
  </fieldset>
</div>

<button type="submit" class="govuk-button" data-module="govuk-button">
  Yn eich blaen
</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--l"
    }
  },
  items: [
    {
      value: "yes",
      text: "Yes"
    },
    {
      value: "no",
      text: "No"
    }
  ]
}) }}

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

                  {% 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: "A hoffech gyfathrebu â CThEM drwy ddull electronig, yn hytrach nag ar bapur?",
      isPageHeading: true,
      classes: "govuk-fieldset__legend--l"
    }
  },
  items: [
    {
      value: "yes",
      text: "Iawn"
    },
    {
      value: "no",
      text: "Na"
    }
  ]
}) }}

{{ govukButton({
  text: "Yn eich blaen"
}) }}

Use a single checkbox

Open this example in a new tab Display in English Display in Welsh

HTML
Nunjucks

              <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" data-module="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 type="submit" class="govuk-button" data-module="govuk-button">
  Continue
</button>

                <div class="govuk-form-group">
  <label class="govuk-label" for="access-code">
    Cod cyrchu
  </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" data-module="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">
        Cofiwch y cod cyrchu hwn am 7 diwrnod
      </label>
    </div>
  </div>
</div>

<button type="submit" class="govuk-button" data-module="govuk-button">
  Yn eich blaen
</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"
}) }}

                  {% 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: "Cod cyrchu"
  },
  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: "Cofiwch y cod cyrchu hwn am 7 diwrnod"
    }
  ]
}) }}

{{ govukButton({
  text: "Yn eich blaen"
}) }}

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.

Open this example in a new tab Display in English Display in Welsh

HTML
Nunjucks

              <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" data-module="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 type="submit" class="govuk-button" data-module="govuk-button">
  Continue
</button>

                <div class="govuk-form-group">
  <fieldset class="govuk-fieldset">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--xl">
      <h1 class="govuk-fieldset__heading">
        Nodwch eich dewisiadau
      </h1>
    </legend>
    <div class="govuk-checkboxes" data-module="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">
          Hoffwn gyfathrebu â CThEM drwy ddull electronig, yn hytrach nag ar bapur
        </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">
          Cofiwch y cod cyrchu hwn am 7 diwrnod
        </label>
      </div>
    </div>
  </fieldset>
</div>

<button type="submit" class="govuk-button" data-module="govuk-button">
  Yn eich blaen
</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"
}) }}

                  {% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  idPrefix: "mixed",
  name: "mixed",
  fieldset: {
    legend: {
      text: "Nodwch eich dewisiadau",
      isPageHeading: true,
      classes: "govuk-fieldset__legend--xl"
    }
  },
  items: [
    {
      value: "paperless",
      text: "Hoffwn gyfathrebu â CThEM drwy ddull electronig, yn hytrach nag ar bapur"
    },
    {
      value: "access-code-7-days",
      text: "Cofiwch y cod cyrchu hwn am 7 diwrnod"
    }
  ]
}) }}
{{ govukButton({
  text: "Yn eich blaen"
}) }}

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