Accounts Office reference

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.

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

HTML
Nunjucks

              <div class="govuk-form-group">
  <h1 class="govuk-label-wrapper">
    <label class="govuk-label govuk-label--l" for="accounts-office-reference">
      What is your Accounts Office reference?
    </label>
  </h1>
  <div 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.
  </div>
  <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 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="accounts-office-reference">
      Beth yw’ch cyfeirnod y Swyddfa Gyfrifon?
    </label>
  </h1>
  <div id="accounts-office-reference-hint" class="govuk-hint">
    Mae hwn yn 13 o gymeriadau, megis 123PX00123456 neu 123PX0012345X. Bydd hwn i’w gael ar lythyrau oddi wrth CThEM ynghylch TWE ac ar lythyrau a gawsoch wrth gofrestru fel cyflogwr.
  </div>
  <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 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 your Accounts Office reference?",
      isPageHeading: true,
      classes: "govuk-label--l"
    },
    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"
}) }}

                  {% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/button/macro.njk" import govukButton %}

{{
  govukInput({
    label: {
      text: "Beth yw’ch cyfeirnod y Swyddfa Gyfrifon?",
      isPageHeading: true,
      classes: "govuk-label--l"
    },
    hint: {
      text: 'Mae hwn yn 13 o gymeriadau, megis 123PX00123456 neu 123PX0012345X. Bydd hwn i’w gael ar lythyrau oddi wrth CThEM ynghylch TWE ac ar lythyrau a gawsoch wrth gofrestru fel cyflogwr.'
    },
    id: "accounts-office-reference",
    name: "accounts-office-reference",
    classes: "govuk-input--width-10"
  })
}}

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

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

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="accounts-office-reference">
    What is your Accounts Office reference?
  </label>
  <div 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.
  </div>
  <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>

                <div class="govuk-form-group">
  <label class="govuk-label" for="accounts-office-reference">
    Beth yw’ch cyfeirnod y Swyddfa Gyfrifon?
  </label>
  <div id="accounts-office-reference-hint" class="govuk-hint">
    Mae hwn yn 13 o gymeriadau, megis 123PX00123456 neu 123PX0012345X. Bydd hwn i’w gael ar lythyrau oddi wrth CThEM ynghylch TWE ac ar lythyrau a gawsoch wrth gofrestru fel cyflogwr.
  </div>
  <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"
  })
}}

                  {% from "govuk/components/input/macro.njk" import govukInput %}

{{
  govukInput({
    label: {
      text: "Beth yw’ch cyfeirnod y Swyddfa Gyfrifon?"
    },
    hint: {
      text: 'Mae hwn yn 13 o gymeriadau, megis 123PX00123456 neu 123PX0012345X. Bydd hwn i’w gael ar lythyrau oddi wrth CThEM ynghylch TWE ac ar lythyrau a gawsoch wrth gofrestru fel cyflogwr.'
    },
    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:

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

HTML
Nunjucks

              <div class="govuk-form-group govuk-form-group--error">
  <label class="govuk-label" for="accounts-office-reference">
    What is your Accounts Office reference?
  </label>
  <div 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.
  </div>
  <p id="accounts-office-reference-error" class="govuk-error-message">
    <span class="govuk-visually-hidden">Error:</span> Enter your Accounts Office reference
  </p>
  <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>

                <div class="govuk-form-group govuk-form-group--error">
  <label class="govuk-label" for="accounts-office-reference">
    Beth yw’ch cyfeirnod y Swyddfa Gyfrifon?
  </label>
  <div id="accounts-office-reference-hint" class="govuk-hint">
    Mae hwn yn 13 o gymeriadau, megis 123PX00123456 neu 123PX0012345X. Bydd hwn i’w gael ar lythyrau oddi wrth CThEM ynghylch TWE ac ar lythyrau a gawsoch wrth gofrestru fel cyflogwr.
  </div>
  <p id="accounts-office-reference-error" class="govuk-error-message">
    <span class="govuk-visually-hidden">Gwall:</span> Nodwch eich cyfeirnod Swyddfa Gyfrifon
  </p>
  <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'
  })
}}

                  {% from "govuk/components/input/macro.njk" import govukInput %}

{{
  govukInput({
    label: {
      text: 'Beth yw’ch cyfeirnod y Swyddfa Gyfrifon?'
    },
    hint: {
      text: 'Mae hwn yn 13 o gymeriadau, megis 123PX00123456 neu 123PX0012345X. Bydd hwn i’w gael ar lythyrau oddi wrth CThEM ynghylch TWE ac ar lythyrau a gawsoch wrth gofrestru fel cyflogwr.'
    },
    errorMessage: {
      text: 'Nodwch eich cyfeirnod Swyddfa Gyfrifon',
      visuallyHiddenText: 'Gwall'
    },
    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