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.

Employer PAYE reference

experimental

This is currently experimental because more research is needed.

This is currently experimental because more research is needed.

This pattern lets the user enter an employer PAYE reference. Do not call it ‘PAYE employer reference number’, ‘employer PAYE reference number’ or ‘PAYE reference’.

When to use

Use this pattern when the user must enter an employer PAYE reference to use a service.

If there is a good reason for asking for an employer PAYE reference but the user does not have to enter one, make it optional.

When not to use

If there is no good reason for asking for an employer PAYE reference and the user does not have to enter one to use the service, do not ask for one.

How it works

You can ask for the employer PAYE reference as the main heading or <h1> of the screen. It can be a question or statement.

            <div class="govuk-form-group">
  <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--xl" for="employer-paye-reference">
      What is Anycompany’s employer PAYE reference?
    </label>

  </h1>
  <span id="employer-paye-reference-hint" class="govuk-hint">
    This is a 3 digit tax office number, a forward slash, and a tax office employer reference, like 123/AB456. It may be called ‘Employer PAYE reference’ or ‘PAYE reference’. It will be on your P60.
  </span>
  <input class="govuk-input govuk-input--width-10" id="employer-paye-reference" name="employer-paye-reference" type="text" aria-describedby="employer-paye-reference-hint">
</div>

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

{{
  govukInput({
    label: {
      text: "What is Anycompany’s employer PAYE reference?",
      isPageHeading: true,
      classes: "govuk-label--xl"
    },
    hint: {
      text: 'This is a 3 digit tax office number, a forward slash, and a tax office employer reference, like 123/AB456. It may be called ‘Employer PAYE reference’ or ‘PAYE reference’. It will be on your P60.'
    },
    id: "employer-paye-reference",
    name: "employer-paye-reference",
    classes: "govuk-input--width-10"
  })
}}

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

Or you can ask for the employer PAYE reference as a normal form label, separate from the <h1>.

            <div class="govuk-form-group">
  <label class="govuk-label" for="employer-paye-reference">
    Your employer PAYE reference
  </label>
  <span id="employer-paye-reference-hint" class="govuk-hint">
    This is a 3 digit tax office number, a forward slash, and a tax office employer reference, like 123/AB456. It may be called ‘Employer PAYE reference’ or ‘PAYE reference’. It will be on letters from HMRC about PAYE.
  </span>
  <input class="govuk-input govuk-input--width-10" id="employer-paye-reference" name="employer-paye-reference" type="text" aria-describedby="employer-paye-reference-hint">
</div>
          
              {% from "govuk/components/input/macro.njk" import govukInput %}

{{
  govukInput({
    label: {
      text: "Your employer PAYE reference"
    },
    hint: {
      text: 'This is a 3 digit tax office number, a forward slash, and a tax office employer reference, like 123/AB456. It may be called ‘Employer PAYE reference’ or ‘PAYE reference’. It will be on letters from HMRC about PAYE.'
    },
    id: "employer-paye-reference",
    name: "employer-paye-reference",
    classes: "govuk-input--width-10"
  })
}}
            

Use a single text input and get the user to enter the reference formatted as:

  • 3 numbers
  • a forward slash (/)
  • between 1 and 10 characters, which can be letters and numbers

Provide help

Always provide help in the form label, normal content or hint text that is as clear as possible. This may include:

  • a short explanation of what an employer PAYE reference is
  • where the user can find it
  • what it looks like
  • an example – if you show an example, always use ‘123/AB456’

In a personal tax service, use the company’s name, like ‘Anycompany’s employer PAYE reference’. Try to avoid ‘your employer’s employer PAYE reference’ because it could be confusing.

In a business tax service, if it is not the company the user works for, use the company’s name. If it is the company the user works for, use ‘your employer PAYE reference’.

You can use an image that shows where it is on documents and letters.

Do not use the details component to hide any help. Research shows users may:

  • not know what an employer PAYE reference is
  • need help to know what an employer PAYE reference looks like

Error messages

Error messages should be styled like this:

            <div class="govuk-form-group govuk-form-group--error">
  <label class="govuk-label" for="employer-paye-reference">
    Your employer PAYE reference
  </label>
  <span id="employer-paye-reference-hint" class="govuk-hint">
    This is a 3 digit tax office number, a forward slash, and a tax office employer reference, like 123/AB456. It may be called ‘Employer PAYE reference’ or ‘PAYE reference’. It will be on letters from HMRC about PAYE.
  </span>
  <span id="employer-paye-reference-error" class="govuk-error-message">
    <span class="govuk-visually-hidden">Error:</span> Enter your employer PAYE reference
  </span>
  <input class="govuk-input govuk-input--width-10 govuk-input--error" id="employer-paye-reference" name="employer-paye-reference" type="text" aria-describedby="employer-paye-reference-hint employer-paye-reference-error">
</div>
          
              {% from "govuk/components/input/macro.njk" import govukInput %}

{{
  govukInput({
    label: {
      text: 'Your employer PAYE reference'
    },
    hint: {
      text: 'This is a 3 digit tax office number, a forward slash, and a tax office employer reference, like 123/AB456. It may be called ‘Employer PAYE reference’ or ‘PAYE reference’. It will be on letters from HMRC about PAYE.'
    },
    errorMessage: {
      text: 'Enter your employer PAYE reference'
    },
    id: 'employer-paye-reference',
    name: 'employer-paye-reference',
    classes: 'govuk-input--width-10'
  })
}}
            

Make sure errors follow the guidance about error messages in the GOV.UK Design System and have specific error messages for specific error states.

If the employer PAYE reference is empty

Say ‘Enter [whatever it is]’.
For example, ‘Enter Anycompany’s employer PAYE reference’.

If the employer PAYE reference is in the wrong format

Say ‘Enter [whatever it is] in the correct format’.
For example, ‘Enter Anycompany’s employer PAYE reference in the correct format’.

Research

Research has shown that users often expect this kind of information to be pre-populated, especially when they have signed in.

We need more research. If you have used employer PAYE reference, get in touch to share your research findings.

Discuss employer PAYE reference on GitHub