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.

Accounts Office reference

experimental

This is currently experimental because more research is needed.

This pattern lets the user enter an Accounts Office reference. Do not call it ‘Accounts Office reference number’, ‘accounts office reference’ or ‘PAYE Accounts Office reference’.

When to use

Use this pattern when the user must enter an Accounts Office reference to use a service.

If there is a good reason for asking for an Accounts Office 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 Accounts Office 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 Accounts Office 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="accounts-office-reference">
      What is your Accounts Office reference?
    </label>

  </h1>
  <span id="accounts-office-reference-hint" class="govuk-hint">
    This is 13 characters, like 123PX00123456 or 123PX0012345X. It will be on letters from HMRC about PAYE and when you registered as an employer.
  </span>
  <input class="govuk-input govuk-input--width-10" id="accounts-office-reference" name="accounts-office-reference" type="text" aria-describedby="accounts-office-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 your Accounts Office reference?",
      isPageHeading: true,
      classes: "govuk-label--xl"
    },
    hint: {
      text: 'This is 13 characters, like 123PX00123456 or 123PX0012345X. It will be on letters from HMRC about PAYE and when you registered as an employer.'
    },
    id: "accounts-office-reference",
    name: "accounts-office-reference",
    classes: "govuk-input--width-10"
  })
}}

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

Or you can ask for the Accounts Office reference as a form label, separate from the <h1>.

            <div class="govuk-form-group">
  <label class="govuk-label" for="accounts-office-reference">
    What is your Accounts Office reference?
  </label>
  <span id="accounts-office-reference-hint" class="govuk-hint">
    This is 13 characters, like 123PX00123456 or 123PX0012345X. It will be on letters from HMRC about PAYE and when you registered as an employer.
  </span>
  <input class="govuk-input govuk-input--width-10" id="accounts-office-reference" name="accounts-office-reference" type="text" aria-describedby="accounts-office-reference-hint">
</div>
          
              {% from "govuk/components/input/macro.njk" import govukInput %}

{{
  govukInput({
    label: {
      text: "What is your Accounts Office reference?"
    },
    hint: {
      text: 'This is 13 characters, like 123PX00123456 or 123PX0012345X. It will be on letters from HMRC about PAYE and when you registered as an employer.'
    },
    id: "accounts-office-reference",
    name: "accounts-office-reference",
    classes: "govuk-input--width-10"
  })
}}
            

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

  • 3 numbers
  • ‘P’
  • a letter
  • 8 numbers or 7 numbers and an ‘X’

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 Accounts Office reference is
  • where the user can find it
  • what it looks like
  • an example – if you show an example, always use ‘123PX00123456’ or ‘123PX0012345X’

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 Accounts Office reference is
  • need help to know what an Accounts Office 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="accounts-office-reference">
    What is your Accounts Office reference?
  </label>
  <span id="accounts-office-reference-hint" class="govuk-hint">
    This is 13 characters, like 123PX00123456 or 123PX0012345X. It will be on letters from HMRC about PAYE and when you registered as an employer.
  </span>
  <span id="accounts-office-reference-error" class="govuk-error-message">
    <span class="govuk-visually-hidden">Error:</span> Enter your Accounts Office reference
  </span>
  <input class="govuk-input govuk-input--width-10 govuk-input--error" id="accounts-office-reference" name="accounts-office-reference" type="text" aria-describedby="accounts-office-reference-hint accounts-office-reference-error">
</div>
          
              {% from "govuk/components/input/macro.njk" import govukInput %}

{{
  govukInput({
    label: {
      text: 'What is your Accounts Office reference?'
    },
    hint: {
      text: 'This is 13 characters, like 123PX00123456 or 123PX0012345X. It will be on letters from HMRC about PAYE and when you registered as an employer.'
    },
    errorMessage: {
      text: 'Enter your Accounts Office reference'
    },
    id: 'accounts-office-reference',
    name: 'accounts-office-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 Accounts Office reference is empty

Say ‘Enter [whatever it is]’.
For example, ‘Enter your Accounts Office reference’.

If the Accounts Office reference is in the wrong format

Say ‘Enter [whatever it is] in the correct format’.
For example, ‘Enter your Accounts Office 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 Accounts Office reference, get in touch to share your research findings.

Discuss Accounts Office reference on GitHub