Ask users for Ethnic groups
Experimental

This pattern is experimental because more research is needed to validate it.

Only collect users’ ethnic groups if you are going to use the data, for example, as part of your organisation’s equality monitoring.

Before using this pattern, make sure you have permission from your organisation to collect this information.

Read guidance about collecting personal information in the GOV.UK Service Manual.

‘Ethnic group’ flow diagram. Contains an initial page asking “What is your ethnic group?” with 6 options. 5 of the options lead to separate follow-up pages asking ”Which one best describes your background?” for Asian, Black, Mixed, White, or Other. The 6th option is “Prefer not to say”, which exits the flow.

When to use this pattern

Follow this pattern if you need to ask users in the UK for their ethnic group.

How it works

When asking for users’ ethnic groups:

  • make the questions optional
  • use the exact wording of the questions as shown in this pattern
  • use the exact ethnic group categories shown in this pattern, accommodating regional differences
  • let users specify a different ethnic group from those provided
  • tell users how their data will be used
  • make sure the data is used and stored in line with data protection rules

Ask for ethnic groups in 2 steps

First, ask users for their broad ethnic group.

Then direct them to a second page where they can choose a specific ethnic background within their broad ethnic group.

Research from the Office of National Statistics (ONS) found that presenting all of the ethnic group options on a single page caused some users to try and select more than one option. Splitting the question across 2 pages solved this problem in testing with more than 300 users.

<div class="govuk-form-group">
  <fieldset class="govuk-fieldset">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
      <h1 class="govuk-fieldset__heading">
        What is your ethnic group?
      </h1>
    </legend>
    <div class="govuk-radios">
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group" name="ethnic-group" type="radio" value="asian-or-asian-british" aria-describedby="ethnic-group-item-hint">
        <label class="govuk-label govuk-radios__label" for="ethnic-group">
          Asian or Asian British
        </label>
        <div id="ethnic-group-item-hint" class="govuk-hint govuk-radios__hint">
          Includes any Asian background, for example, Bangladeshi, Chinese, Indian, Pakistani
        </div>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group-2" name="ethnic-group" type="radio" value="black-african-black-british-or-caribbean" aria-describedby="ethnic-group-2-item-hint">
        <label class="govuk-label govuk-radios__label" for="ethnic-group-2">
          Black, African, Black British or Caribbean
        </label>
        <div id="ethnic-group-2-item-hint" class="govuk-hint govuk-radios__hint">
          Includes any Black background
        </div>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group-3" name="ethnic-group" type="radio" value="mixed-or-multiple-ethnic-groups" aria-describedby="ethnic-group-3-item-hint">
        <label class="govuk-label govuk-radios__label" for="ethnic-group-3">
          Mixed or multiple ethnic groups
        </label>
        <div id="ethnic-group-3-item-hint" class="govuk-hint govuk-radios__hint">
          Includes any Mixed background
        </div>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group-4" name="ethnic-group" type="radio" value="white" aria-describedby="ethnic-group-4-item-hint">
        <label class="govuk-label govuk-radios__label" for="ethnic-group-4">
          White
        </label>
        <div id="ethnic-group-4-item-hint" class="govuk-hint govuk-radios__hint">
          Includes any White background
        </div>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group-5" name="ethnic-group" type="radio" value="another-ethnic-group" aria-describedby="ethnic-group-5-item-hint">
        <label class="govuk-label govuk-radios__label" for="ethnic-group-5">
          Another ethnic group
        </label>
        <div id="ethnic-group-5-item-hint" class="govuk-hint govuk-radios__hint">
          Includes any other ethnic group, for example, Arab
        </div>
      </div>
      <div class="govuk-radios__divider">or</div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group-7" name="ethnic-group" type="radio" value="prefer-not-to-say">
        <label class="govuk-label govuk-radios__label govuk-label" for="ethnic-group-7">
          Prefer not to say
        </label>
      </div>
    </div>

  </fieldset>
</div>
{% from "govuk/components/radios/macro.njk" import govukRadios %}

{{ govukRadios({
  idPrefix: "ethnic-group",
  name: "ethnic-group",
  fieldset: {
    legend: {
      text: "What is your ethnic group?",
      isPageHeading: true,
      classes: "govuk-fieldset__legend--l"
    }
  },
  items: [
    {
      value: "asian-or-asian-british",
      text: "Asian or Asian British",
      hint: {
        text: 'Includes any Asian background, for example, Bangladeshi, Chinese, Indian, Pakistani'
      }
    },
    {
      value: "black-african-black-british-or-caribbean",
      text: "Black, African, Black British or Caribbean",
      hint: {
        text: 'Includes any Black background'
      }
    },
     {
      value: "mixed-or-multiple-ethnic-groups",
      text: "Mixed or multiple ethnic groups",
      hint: {
        text: 'Includes any Mixed background'
      }
    },
    {
      value: "white",
      text: "White",
      hint: {
        text: 'Includes any White background'
      }
    },
    {
      value: "another-ethnic-group",
      text: "Another ethnic group",
      hint: {
        text: 'Includes any other ethnic group, for example, Arab'
      }
    },
    {
      divider: "or"
    },
    {
      value: "prefer-not-to-say",
      text: "Prefer not to say",
      label: {
        classes: 'govuk-label'
      }
    }
  ]
}) }}

Asian or Asian British

Users who select ‘Asian or Asian British’ should see this page.

<div class="govuk-form-group">
  <fieldset class="govuk-fieldset">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
      <h1 class="govuk-fieldset__heading">
        Which one best describes your Asian or Asian British background?
      </h1>
    </legend>
    <div class="govuk-radios govuk-radios--conditional" data-module="govuk-radios">
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group" name="ethnic-group" type="radio" value="bangladeshi">
        <label class="govuk-label govuk-radios__label" for="ethnic-group">
          Bangladeshi
        </label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group-2" name="ethnic-group" type="radio" value="chinese">
        <label class="govuk-label govuk-radios__label" for="ethnic-group-2">
          Chinese
        </label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group-3" name="ethnic-group" type="radio" value="indian">
        <label class="govuk-label govuk-radios__label" for="ethnic-group-3">
          Indian
        </label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group-4" name="ethnic-group" type="radio" value="pakistani">
        <label class="govuk-label govuk-radios__label" for="ethnic-group-4">
          Pakistani
        </label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group-5" name="ethnic-group" type="radio" value="another-asian-background" data-aria-controls="conditional-ethnic-group-5">
        <label class="govuk-label govuk-radios__label" for="ethnic-group-5">
          Another Asian background
        </label>
      </div>
      <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-ethnic-group-5">
        <div class="govuk-form-group">
          <label class="govuk-label" for="ethnicity-asian-other">
            Your Asian background (optional)
          </label>
          <input class="govuk-input govuk-!-width-two-thirds" id="ethnicity-asian-other" name="ethnicity-asian-other" type="text"></div>

      </div>
      <div class="govuk-radios__divider">or</div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group-7" name="ethnic-group" type="radio" value="prefer-not-to-say">
        <label class="govuk-label govuk-radios__label govuk-label" for="ethnic-group-7">
          Prefer not to say
        </label>
      </div>
    </div>

  </fieldset>
</div>
{% from "govuk/components/radios/macro.njk" import govukRadios %}
{% from "govuk/components/input/macro.njk" import govukInput %}

{% set asianOtherHtml %}
  {{ govukInput({
    id: "ethnicity-asian-other",
    name: "ethnicity-asian-other",
    classes: "govuk-!-width-two-thirds",
    label: {
      text: "Your Asian background (optional)"
    }
  }) }}
{% endset -%}

{{ govukRadios({
  idPrefix: "ethnic-group",
  name: "ethnic-group",
  fieldset: {
    legend: {
      text: "Which one best describes your Asian or Asian British background?",
      isPageHeading: true,
      classes: "govuk-fieldset__legend--l"
    }
  },
  items: [
    {
      value: "bangladeshi",
      text: "Bangladeshi"
    },
    {
      value: "chinese",
      text: "Chinese"
    },
    {
      value: "indian",
      text: "Indian"
    },
    {
      value: "pakistani",
      text: "Pakistani"
    },
    {
      value: "another-asian-background",
      text: "Another Asian background",
      conditional: {
        html: asianOtherHtml
      }
    },
    {
      divider: "or"
    },
    {
      value: "prefer-not-to-say",
      text: "Prefer not to say",
      label: {
        classes: 'govuk-label'
      }
    }
  ]
}) }}

Black, African, Black British or Carribean

Users who select ‘Black, African, Black British or Carribean’ should see this page.

<div class="govuk-form-group">
  <fieldset class="govuk-fieldset">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
      <h1 class="govuk-fieldset__heading">
        Which one best describes your Black, African, Black British or Caribbean background?
      </h1>
    </legend>
    <div class="govuk-radios govuk-radios--conditional" data-module="govuk-radios">
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group" name="ethnic-group" type="radio" value="african">
        <label class="govuk-label govuk-radios__label" for="ethnic-group">
          African
        </label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group-2" name="ethnic-group" type="radio" value="">
        <label class="govuk-label govuk-radios__label" for="ethnic-group-2">
          Caribbean
        </label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group-3" name="ethnic-group" type="radio" value="another-black-background" data-aria-controls="conditional-ethnic-group-3">
        <label class="govuk-label govuk-radios__label" for="ethnic-group-3">
          Another Black background
        </label>
      </div>
      <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-ethnic-group-3">
        <div class="govuk-form-group">
          <label class="govuk-label" for="ethnicity-mixed-other">
            Your Black background (optional)
          </label>
          <input class="govuk-input govuk-!-width-two-thirds" id="ethnicity-mixed-other" name="ethnicity-mixed-other" type="text"></div>

      </div>
      <div class="govuk-radios__divider">or</div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group-5" name="ethnic-group" type="radio" value="prefer-not-to-say">
        <label class="govuk-label govuk-radios__label govuk-label" for="ethnic-group-5">
          Prefer not to say
        </label>
      </div>
    </div>

  </fieldset>
</div>
{% from "govuk/components/radios/macro.njk" import govukRadios %}
{% from "govuk/components/input/macro.njk" import govukInput %}

{% set blackOtherHtml %}
  {{ govukInput({
    id: "ethnicity-mixed-other",
    name: "ethnicity-mixed-other",
  classes: "govuk-!-width-two-thirds",
    label: {
      text: "Your Black background (optional)"
    }
  }) }}
{% endset -%}

{{ govukRadios({
  idPrefix: "ethnic-group",
  name: "ethnic-group",
  fieldset: {
    legend: {
      text: "Which one best describes your Black, African, Black British or Caribbean background?",
      isPageHeading: true,
      classes: "govuk-fieldset__legend--l"
    }
  },
  items: [
    {
      value: "african",
      text: "African"
    },
    {
      text: "caribbean",
      text: "Caribbean"
    },
    {
      value: "another-black-background",
      text: "Another Black background",
      conditional: {
        html: blackOtherHtml
      }
    },
    {
      divider: "or"
    },
    {
      value: "prefer-not-to-say",
      text: "Prefer not to say",
      label: {
        classes: 'govuk-label'
      }
    }
  ]
}) }}

Mixed or multiple ethnic groups

Users who select ‘Mixed or multiple ethnic groups’ should see this page.

<div class="govuk-form-group">
  <fieldset class="govuk-fieldset">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
      <h1 class="govuk-fieldset__heading">
        Which one best describes your Mixed or Multiple ethnic groups background?
      </h1>
    </legend>
    <div class="govuk-radios govuk-radios--conditional" data-module="govuk-radios">
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group" name="ethnic-group" type="radio" value="asian-and-white">
        <label class="govuk-label govuk-radios__label" for="ethnic-group">
          Asian and White
        </label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group-2" name="ethnic-group" type="radio" value="black-african-and-white">
        <label class="govuk-label govuk-radios__label" for="ethnic-group-2">
          Black African and White
        </label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group-3" name="ethnic-group" type="radio" value="black-caribbean-and-white">
        <label class="govuk-label govuk-radios__label" for="ethnic-group-3">
          Black Caribbean and White
        </label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group-4" name="ethnic-group" type="radio" value="another-mixed-background" data-aria-controls="conditional-ethnic-group-4">
        <label class="govuk-label govuk-radios__label" for="ethnic-group-4">
          Another Mixed background
        </label>
      </div>
      <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-ethnic-group-4">
        <div class="govuk-form-group">
          <label class="govuk-label" for="ethnicity-white-other">
            Your Mixed background (optional)
          </label>
          <input class="govuk-input govuk-!-width-two-thirds" id="ethnicity-white-other" name="ethnicity-white-other" type="text"></div>

      </div>
      <div class="govuk-radios__divider">or</div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group-6" name="ethnic-group" type="radio" value="prefer-not-to-say">
        <label class="govuk-label govuk-radios__label govuk-label" for="ethnic-group-6">
          Prefer not to say
        </label>
      </div>
    </div>

  </fieldset>
</div>
{% from "govuk/components/radios/macro.njk" import govukRadios %}
{% from "govuk/components/input/macro.njk" import govukInput %}

{% set mixedOtherHtml %}
  {{ govukInput({
    id: "ethnicity-white-other",
    name: "ethnicity-white-other",
    classes: "govuk-!-width-two-thirds",
    label: {
      text: "Your Mixed background (optional)"
    }
  }) }}
{% endset -%}

{{ govukRadios({
  idPrefix: "ethnic-group",
  name: "ethnic-group",
  fieldset: {
    legend: {
      text: "Which one best describes your Mixed or Multiple ethnic groups background?",
      isPageHeading: true,
      classes: "govuk-fieldset__legend--l"
    }
  },
  items: [
    {
      value: "asian-and-white",
      text: "Asian and White"
    },
    {
      value: "black-african-and-white",
      text: "Black African and White"
    },
    {
      value: "black-caribbean-and-white",
      text: "Black Caribbean and White"
    },
    {
      value: "another-mixed-background",
      text: "Another Mixed background",
      conditional: {
        html: mixedOtherHtml
      }
    },
    {
      divider: "or"
    },
    {
      value: "prefer-not-to-say",
      text: "Prefer not to say",
      label: {
        classes: 'govuk-label'
      }
    }
  ]
}) }}

White

Users who select ‘White’ should see this page.

<div class="govuk-form-group">
  <fieldset class="govuk-fieldset">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
      <h1 class="govuk-fieldset__heading">
        Which one best describes your White background?
      </h1>
    </legend>
    <div class="govuk-radios govuk-radios--conditional" data-module="govuk-radios">
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group" name="ethnic-group" type="radio" value="british-english-northern-irish-scottish-or-welsh">
        <label class="govuk-label govuk-radios__label" for="ethnic-group">
          British, English, Northern Irish, Scottish, or Welsh
        </label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group-2" name="ethnic-group" type="radio" value="irish">
        <label class="govuk-label govuk-radios__label" for="ethnic-group-2">
          Irish
        </label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group-3" name="ethnic-group" type="radio" value="irish-traveller-or-gypsy">
        <label class="govuk-label govuk-radios__label" for="ethnic-group-3">
          Irish Traveller or Gypsy
        </label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group-4" name="ethnic-group" type="radio" value="another-white-background" data-aria-controls="conditional-ethnic-group-4">
        <label class="govuk-label govuk-radios__label" for="ethnic-group-4">
          Another White background
        </label>
      </div>
      <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-ethnic-group-4">
        <div class="govuk-form-group">
          <label class="govuk-label" for="ethnicity-white-other">
            Your White background (optional)
          </label>
          <input class="govuk-input govuk-!-width-two-thirds" id="ethnicity-white-other" name="ethnicity-white-other" type="text"></div>

      </div>
      <div class="govuk-radios__divider">or</div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group-6" name="ethnic-group" type="radio" value="prefer-not-to-say">
        <label class="govuk-label govuk-radios__label govuk-label" for="ethnic-group-6">
          Prefer not to say
        </label>
      </div>
    </div>

  </fieldset>
</div>
{% from "govuk/components/radios/macro.njk" import govukRadios %}
{% from "govuk/components/input/macro.njk" import govukInput %}

{% set whiteOtherHtml %}
  {{ govukInput({
    id: "ethnicity-white-other",
    name: "ethnicity-white-other",
    classes: "govuk-!-width-two-thirds",
    label: {
      text: "Your White background (optional)"
    }
  }) }}
{% endset -%}

{{ govukRadios({
  idPrefix: "ethnic-group",
  name: "ethnic-group",
  fieldset: {
    legend: {
      text: "Which one best describes your White background?",
      isPageHeading: true,
      classes: "govuk-fieldset__legend--l"
    }
  },
  items: [
    {
      value: "british-english-northern-irish-scottish-or-welsh",
      text: "British, English, Northern Irish, Scottish, or Welsh"
    },
    {
      value: "irish",
      text: "Irish"
    },
    {
      value: "irish-traveller-or-gypsy",
      text: "Irish Traveller or Gypsy"
    },
    {
      value: "another-white-background",
      text: "Another White background",
      conditional: {
        html: whiteOtherHtml
      }
    },
    {
      divider: "or"
    },
    {
      value: "prefer-not-to-say",
      text: "Prefer not to say",
      label: {
        classes: 'govuk-label'
      }
    }
  ]
}) }}

Another ethnic group

Users who select ‘Another ethnic group’ should see this page.

<div class="govuk-form-group">
  <fieldset class="govuk-fieldset">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
      <h1 class="govuk-fieldset__heading">
        Which one best describes your background?
      </h1>
    </legend>
    <div class="govuk-radios govuk-radios--conditional" data-module="govuk-radios">
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group" name="ethnic-group" type="radio" value="arab">
        <label class="govuk-label govuk-radios__label" for="ethnic-group">
          Arab
        </label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group-2" name="ethnic-group" type="radio" value="another-ethnic-background" data-aria-controls="conditional-ethnic-group-2">
        <label class="govuk-label govuk-radios__label" for="ethnic-group-2">
          Another ethnic background
        </label>
      </div>
      <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-ethnic-group-2">
        <div class="govuk-form-group">
          <label class="govuk-label" for="ethnicity-mixed-other">
            Your ethnic background (optional)
          </label>
          <input class="govuk-input govuk-!-width-two-thirds" id="ethnicity-mixed-other" name="ethnicity-mixed-other" type="text"></div>

      </div>
      <div class="govuk-radios__divider">or</div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group-4" name="ethnic-group" type="radio" value="prefer-not-to-say">
        <label class="govuk-label govuk-radios__label govuk-label" for="ethnic-group-4">
          Prefer not to say
        </label>
      </div>
    </div>

  </fieldset>
</div>
{% from "govuk/components/radios/macro.njk" import govukRadios %}
{% from "govuk/components/input/macro.njk" import govukInput %}

{% set otherOtherHtml %}
  {{ govukInput({
    id: "ethnicity-mixed-other",
    name: "ethnicity-mixed-other",
    classes: "govuk-!-width-two-thirds",
    label: {
      text: "Your ethnic background (optional)"
    }
  }) }}
{% endset -%}

{{ govukRadios({
  idPrefix: "ethnic-group",
  name: "ethnic-group",
  fieldset: {
    legend: {
      text: "Which one best describes your background?",
      isPageHeading: true,
      classes: "govuk-fieldset__legend--l"
    }
  },
  items: [
    {
      value: "arab",
      text: "Arab"
    },
    {
      value: "another-ethnic-background",
      text: "Another ethnic background",
      conditional: {
        html: otherOtherHtml
      }
    },
    {
      divider: "or"
    },
    {
      value: "prefer-not-to-say",
      text: "Prefer not to say",
      label: {
        classes: 'govuk-label'
      }
    }
  ]
}) }}

Let users specify a different ethnic group from those provided

You should allow users to enter a different ethnic group in case theirs is not covered by the categories provided. This can also help to inform future changes to the categories, to better reflect how users describe their ethnicity.

Accommodate regional differences

The ethnic groups used in this pattern are for services in England. Different categories are used in Wales, Scotland and Northern Ireland due to differences in requirements, and to reflect local populations.

If your service covers more than one region, you should accommodate these differences in your design. For example, by changing the ethnic groups shown depending on whether the user is based in England, Wales, Scotland or Northern Ireland.

Where this isn’t possible, use the English categories.

Make the question optional

Always give users the option to not give their ethnicity unless you cannot deliver your service without it.

The best way to do this is to include a step asking if users are willing to give their ethnic group. Design this step to work in the context of your service. For example, if you ask for other personal information, such as sexual orientation or disability, this step may need to introduce questions about all of these.

To help users decide how to answer, you should clearly explain how you will use the data using real examples from your service. For example: ‘we use this information to make sure we’re giving equal opportunities to all candidates’.

Be as specific as possible. Research shows users often do not understand how data will be used to meet equality monitoring objectives, which can impact response rates.

Asking other questions for equality monitoring purposes

If you ask for other information for equality monitoring purposes, such as gender, sex or disability, consider how to ask for this alongside ethnicity.

In this case, you could ask a more generic initial question, such as “Will you answer a few more questions so we can monitor this service for equality?”

Make sure you still explain how all the information will be used.

Asking a user for someone else’s ethnic group

You should not normally ask users to give someone else’s ethnic group. This is because ethnicity is self-defined. There are some exceptions, for example, in the case of young children.

Error messages

Error messages should be styled like this:

<div class="govuk-form-group govuk-form-group--error">
  <fieldset class="govuk-fieldset" aria-describedby="ethnic-group-error">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
      <h1 class="govuk-fieldset__heading">
        What is your ethnic group?
      </h1>
    </legend>
    <span id="ethnic-group-error" class="govuk-error-message">
      <span class="govuk-visually-hidden">Error:</span> Select an ethnic group or ‘Prefer not to say’
    </span>
    <div class="govuk-radios">
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group" name="ethnic-group" type="radio" value="asian-or-asian-british" aria-describedby="ethnic-group-item-hint">
        <label class="govuk-label govuk-radios__label" for="ethnic-group">
          Asian or Asian British
        </label>
        <div id="ethnic-group-item-hint" class="govuk-hint govuk-radios__hint">
          Includes any Asian background, for example, Bangladeshi, Chinese, Indian, Pakistani
        </div>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group-2" name="ethnic-group" type="radio" value="black-african-black-british-or-caribbean" aria-describedby="ethnic-group-2-item-hint">
        <label class="govuk-label govuk-radios__label" for="ethnic-group-2">
          Black, African, Black British or Caribbean
        </label>
        <div id="ethnic-group-2-item-hint" class="govuk-hint govuk-radios__hint">
          Includes any Black background
        </div>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group-3" name="ethnic-group" type="radio" value="mixed-or-multiple-ethnic-groups" aria-describedby="ethnic-group-3-item-hint">
        <label class="govuk-label govuk-radios__label" for="ethnic-group-3">
          Mixed or multiple ethnic groups
        </label>
        <div id="ethnic-group-3-item-hint" class="govuk-hint govuk-radios__hint">
          Includes any Mixed background
        </div>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group-4" name="ethnic-group" type="radio" value="white" aria-describedby="ethnic-group-4-item-hint">
        <label class="govuk-label govuk-radios__label" for="ethnic-group-4">
          White
        </label>
        <div id="ethnic-group-4-item-hint" class="govuk-hint govuk-radios__hint">
          Includes any White background
        </div>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group-5" name="ethnic-group" type="radio" value="another-ethnic-group" aria-describedby="ethnic-group-5-item-hint">
        <label class="govuk-label govuk-radios__label" for="ethnic-group-5">
          Another ethnic group
        </label>
        <div id="ethnic-group-5-item-hint" class="govuk-hint govuk-radios__hint">
          Includes any other ethnic group, for example, Arab
        </div>
      </div>
      <div class="govuk-radios__divider">or</div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group-7" name="ethnic-group" type="radio" value="prefer-not-to-say">
        <label class="govuk-label govuk-radios__label govuk-label" for="ethnic-group-7">
          Prefer not to say
        </label>
      </div>
    </div>

  </fieldset>
</div>
{% from "govuk/components/radios/macro.njk" import govukRadios %}

{{ govukRadios({
  idPrefix: "ethnic-group",
  name: "ethnic-group",
  fieldset: {
    legend: {
      text: "What is your ethnic group?",
      isPageHeading: true,
      classes: "govuk-fieldset__legend--l"
    }
  },
  errorMessage: {
    text: "Select an ethnic group or ‘Prefer not to say’"
  },
  items: [
    {
      value: "asian-or-asian-british",
      text: "Asian or Asian British",
      hint: {
        text: 'Includes any Asian background, for example, Bangladeshi, Chinese, Indian, Pakistani'
      }
    },
    {
      value: "black-african-black-british-or-caribbean",
      text: "Black, African, Black British or Caribbean",
      hint: {
        text: 'Includes any Black background'
      }
    },
     {
      value: "mixed-or-multiple-ethnic-groups",
      text: "Mixed or multiple ethnic groups",
      hint: {
        text: 'Includes any Mixed background'
      }
    },
    {
      value: "white",
      text: "White",
      hint: {
        text: 'Includes any White background'
      }
    },
    {
      value: "another-ethnic-group",
      text: "Another ethnic group",
      hint: {
        text: 'Includes any other ethnic group, for example, Arab'
      }
    },
    {
      divider: "or"
    },
    {
      value: "prefer-not-to-say",
      text: "Prefer not to say",
      label: {
        classes: 'govuk-label'
      }
    }
  ]
}) }}
<div class="govuk-form-group govuk-form-group--error">
  <fieldset class="govuk-fieldset" aria-describedby="ethnic-group-error">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
      <h1 class="govuk-fieldset__heading">
        Which one best describes your Asian or Asian British background?
      </h1>
    </legend>
    <span id="ethnic-group-error" class="govuk-error-message">
      <span class="govuk-visually-hidden">Error:</span> Select the option that best describes your Asian or Asian British background
    </span>
    <div class="govuk-radios govuk-radios--conditional" data-module="govuk-radios">
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group" name="ethnic-group" type="radio" value="bangladeshi">
        <label class="govuk-label govuk-radios__label" for="ethnic-group">
          Bangladeshi
        </label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group-2" name="ethnic-group" type="radio" value="chinese">
        <label class="govuk-label govuk-radios__label" for="ethnic-group-2">
          Chinese
        </label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group-3" name="ethnic-group" type="radio" value="indian">
        <label class="govuk-label govuk-radios__label" for="ethnic-group-3">
          Indian
        </label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group-4" name="ethnic-group" type="radio" value="pakistani">
        <label class="govuk-label govuk-radios__label" for="ethnic-group-4">
          Pakistani
        </label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group-5" name="ethnic-group" type="radio" value="another-asian-background" data-aria-controls="conditional-ethnic-group-5">
        <label class="govuk-label govuk-radios__label" for="ethnic-group-5">
          Another Asian background
        </label>
      </div>
      <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-ethnic-group-5">
        <div class="govuk-form-group">
          <label class="govuk-label" for="ethnicity-asian-other">
            Your Asian background (optional)
          </label>
          <input class="govuk-input govuk-!-width-two-thirds" id="ethnicity-asian-other" name="ethnicity-asian-other" type="text"></div>

      </div>
      <div class="govuk-radios__divider">or</div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="ethnic-group-7" name="ethnic-group" type="radio" value="prefer-not-to-say">
        <label class="govuk-label govuk-radios__label govuk-label" for="ethnic-group-7">
          Prefer not to say
        </label>
      </div>
    </div>

  </fieldset>
</div>
{% from "govuk/components/radios/macro.njk" import govukRadios %}
{% from "govuk/components/input/macro.njk" import govukInput %}

{% set asianOtherHtml %}
  {{ govukInput({
    id: "ethnicity-asian-other",
    name: "ethnicity-asian-other",
    classes: "govuk-!-width-two-thirds",
    label: {
      text: "Your Asian background (optional)"
    }
  }) }}
{% endset -%}

{{ govukRadios({
  idPrefix: "ethnic-group",
  name: "ethnic-group",
  fieldset: {
    legend: {
      text: "Which one best describes your Asian or Asian British background?",
      isPageHeading: true,
      classes: "govuk-fieldset__legend--l"
    }
  },
  errorMessage: {
    text: "Select the option that best describes your Asian or Asian British background"
  },
  items: [
    {
      value: "bangladeshi",
      text: "Bangladeshi"
    },
    {
      value: "chinese",
      text: "Chinese"
    },
    {
      value: "indian",
      text: "Indian"
    },
    {
      value: "pakistani",
      text: "Pakistani"
    },
    {
      value: "another-asian-background",
      text: "Another Asian background",
      conditional: {
        html: asianOtherHtml
      }
    },
    {
      divider: "or"
    },
    {
      value: "prefer-not-to-say",
      text: "Prefer not to say",
      label: {
        classes: 'govuk-label'
      }
    }
  ]
}) }}

Data protection

Under the General Data Protection Regulation, there are different rules around the use and storage of someone’s ethnic origin.

Research on this pattern

This pattern is based on a piece of work led by the Race Disparity Unit.

The examples and guidance here are based on examples of ways to ask about ethnic groups from a number of government services and the ONS guidance on collecting ethnic groups data.

The Race Disparity Unit researched this pattern as part of a prototype. They carried out pop-up research with over 30 participants with different ethnic backgrounds.

Almost all participants answered the question quickly and easily, with no one backtracking to change their selection from the previous page.

Five of the participants used the text input provided to specify ‘another’ ethnicity from those provided, which validates the need for this option.

Two participants chose not to answer the question after a step was introduced asking whether users were willing to provide their ethnic group.

Known issues and gaps

The examples in this pattern present the ethnic group options in alphabetical order. This is to avoid either perceived or actual reinforcement of bias towards any ethnic groups.

However, the ONS recommends the following order:

  • White
  • Mixed or multiple ethnic groups
  • Asian
  • Black
  • Other

ONS has published its reasons for the order in finalising the 2011 census questionnaire.

It says:

“As more than 90 per cent of respondents will tick a box under the ‘White’ category, placing it first will minimise 2011 respondent burden.

The ‘Mixed’ heading was positioned after the ‘White’ heading in 2001 because question testing showed that these respondents were likely to miss this category if it was placed at the bottom of the classification (since they could respond using one or more of the tick-boxes higher up in the classification)… The remaining categories… were placed in alphabetical order.

During cognitive testing the majority of respondents found the order of the categories in the ethnic group question acceptable. Respondents in one focus group conducted in Wales questioned why ‘White’ appeared first but did acknowledge that they were listed by population size.”

Next steps

More research is needed to understand where to ask this question in a service.

In addition, the GOV.UK Design System team is actively seeking research findings that relate to the order of the ethnic group options.

If you’ve used this pattern in your service, please get in touch to share your research findings.

Help improve this page

To help make sure that this page is useful, relevant and up to date, you can:

Need help?

If you’ve got a question about the GOV.UK Design System, contact the team.