Skip to main content
Design resources
Back

Employer PAYE reference

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.

Open this example in a new tab: Employer PAYE reference as main heading Display in English Display in Welsh 
              <div class="govuk-form-group">
  <h1 class="govuk-label-wrapper">
    <label class="govuk-label govuk-label--l" for="employer-paye-reference">
      What is Anycompany’s employer PAYE reference?
    </label>
  </h1>
  <div 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.
  </div>
  <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 type="submit" class="govuk-button" data-module="govuk-button">
  Continue
</button>
            
                <div class="govuk-form-group">
  <h1 class="govuk-label-wrapper">
    <label class="govuk-label govuk-label--l" for="employer-paye-reference">
      Beth yw cyfeirnod TWE y cyflogwr ar gyfer Anycompany?
    </label>
  </h1>
  <div id="employer-paye-reference-hint" class="govuk-hint">
    Rhif swyddfa dreth 3 digid yw hwn, wedi’i ddilyn gan flaenslaes a chyfeirnod cyflogwr gan y swyddfa dreth, megis 123/AB456. Mae’n bosibl y cyfeirir ato fel ‘Cyfeirnod TWE y Cyflogwr’ neu fel ‘Cyfeirnod TWE’. Bydd hwn ar eich P60.
  </div>
  <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 type="submit" class="govuk-button" data-module="govuk-button">
  Yn eich blaen
</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--l"
    },
    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"
}) }}
              
                  {% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/button/macro.njk" import govukButton %}

{{
  govukInput({
    label: {
      text: "Beth yw cyfeirnod TWE y cyflogwr ar gyfer Anycompany?",
      isPageHeading: true,
      classes: "govuk-label--l"
    },
    hint: {
      text: 'Rhif swyddfa dreth 3 digid yw hwn, wedi’i ddilyn gan flaenslaes a chyfeirnod cyflogwr gan y swyddfa dreth, megis 123/AB456. Mae’n bosibl y cyfeirir ato fel ‘Cyfeirnod TWE y Cyflogwr’ neu fel ‘Cyfeirnod TWE’. Bydd hwn ar eich P60.'
    },
    id: "employer-paye-reference",
    name: "employer-paye-reference",
    classes: "govuk-input--width-10"
  })
}}

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

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

Open this example in a new tab: Employer PAYE reference as form label Display in English Display in Welsh 
              <div class="govuk-form-group">
  <label class="govuk-label" for="employer-paye-reference">
    Your employer PAYE reference
  </label>
  <div 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.
  </div>
  <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>
            
                <div class="govuk-form-group">
  <label class="govuk-label" for="employer-paye-reference">
    Eich Cyfeirnod TWE y Cyflogwr
  </label>
  <div id="employer-paye-reference-hint" class="govuk-hint">
    Rhif swyddfa dreth 3 digid yw hwn, wedi’i ddilyn gan flaenslaes a chyfeirnod cyflogwr gan y swyddfa dreth, megis 123/AB456. Mae’n bosibl y cyfeirir ato fel ‘Cyfeirnod TWE y Cyflogwr’ neu fel ‘Cyfeirnod TWE’. Bydd i’w weld ar lythyrau oddi wrth CThEM ynghylch TWE.
  </div>
  <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"
  })
}}
              
                  {% from "govuk/components/input/macro.njk" import govukInput %}

{{
  govukInput({
    label: {
      text: "Eich Cyfeirnod TWE y Cyflogwr"
    },
    hint: {
      text: 'Rhif swyddfa dreth 3 digid yw hwn, wedi’i ddilyn gan flaenslaes a chyfeirnod cyflogwr gan y swyddfa dreth, megis 123/AB456. Mae’n bosibl y cyfeirir ato fel ‘Cyfeirnod TWE y Cyflogwr’ neu fel ‘Cyfeirnod TWE’. Bydd i’w weld ar lythyrau oddi wrth CThEM ynghylch TWE.'
    },
    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:

Open this example in a new tab: Employer PAYE reference with error Display in English Display in Welsh 
              <div class="govuk-form-group govuk-form-group--error">
  <label class="govuk-label" for="employer-paye-reference">
    Your employer PAYE reference
  </label>
  <div 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.
  </div>
  <p id="employer-paye-reference-error" class="govuk-error-message">
    <span class="govuk-visually-hidden">Error:</span> Enter your employer PAYE reference
  </p>
  <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>
            
                <div class="govuk-form-group govuk-form-group--error">
  <label class="govuk-label" for="employer-paye-reference">
    Eich Cyfeirnod TWE y Cyflogwr
  </label>
  <div id="employer-paye-reference-hint" class="govuk-hint">
    Rhif swyddfa dreth 3 digid yw hwn, wedi’i ddilyn gan flaenslaes a chyfeirnod cyflogwr gan y swyddfa dreth, megis 123/AB456. Mae’n bosibl y cyfeirir ato fel ‘Cyfeirnod TWE y Cyflogwr’ neu fel ‘Cyfeirnod TWE’. Bydd i’w weld ar lythyrau oddi wrth CThEM ynghylch TWE.
  </div>
  <p id="employer-paye-reference-error" class="govuk-error-message">
    <span class="govuk-visually-hidden">Gwall:</span> Nodwch eich Cyfeirnod TWE y Cyflogwr
  </p>
  <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'
  })
}}
              
                  {% from "govuk/components/input/macro.njk" import govukInput %}

{{
  govukInput({
    label: {
      text: 'Eich Cyfeirnod TWE y Cyflogwr'
    },
    hint: {
      text: 'Rhif swyddfa dreth 3 digid yw hwn, wedi’i ddilyn gan flaenslaes a chyfeirnod cyflogwr gan y swyddfa dreth, megis 123/AB456. Mae’n bosibl y cyfeirir ato fel ‘Cyfeirnod TWE y Cyflogwr’ neu fel ‘Cyfeirnod TWE’. Bydd i’w weld ar lythyrau oddi wrth CThEM ynghylch TWE.'
    },
    errorMessage: {
      text: 'Nodwch eich Cyfeirnod TWE y Cyflogwr',
      visuallyHiddenText: 'Gwall'
    },
    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