VAT registration number
This pattern lets the user enter a VAT registration number. Do not call it ‘VAT number’ or ‘VAT identification number’.
When to use
Use this pattern when the user must enter a VAT registration number to use a service.
If there is a good reason for asking for a VAT registration number 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 a VAT registration number 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 VAT registration number as the main heading or <h1> of the screen. It may be a question or statement.
<div class="govuk-form-group">
<h1 class="govuk-label-wrapper">
<label class="govuk-label govuk-label--l" for="vat-registration-number">
What is Anycompany’s VAT registration number?
</label>
</h1>
<div id="vat-registration-number-hint" class="govuk-hint">
This is 9 numbers, sometimes with ‘GB’ at the start, for example 123456789 or GB123456789. You can find it on Anycompany’s VAT registration certificate.
</div>
<input class="govuk-input govuk-input--width-10" id="vat-registration-number" name="vat-registration-number" type="text" aria-describedby="vat-registration-number-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="vat-registration-number">
Beth yw rhif cofrestru TAW Anycompany?
</label>
</h1>
<div id="vat-registration-number-hint" class="govuk-hint">
9 rhif yw hwn, weithiau â ‘GB’ ar y dechrau. Er enghraifft 123456789 neu GB123456789. Mae hwn i’w weld ar dystysgrif cofrestru TAW Anycompany.
</div>
<input class="govuk-input govuk-input--width-10" id="vat-registration-number" name="vat-registration-number" type="text" aria-describedby="vat-registration-number-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 VAT registration number?",
isPageHeading: true,
classes: "govuk-label--l"
},
hint: {
text: 'This is 9 numbers, sometimes with ‘GB’ at the start, for example 123456789 or GB123456789. You can find it on Anycompany’s VAT registration certificate.'
},
id: "vat-registration-number",
name: "vat-registration-number",
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 rhif cofrestru TAW Anycompany?",
isPageHeading: true,
classes: "govuk-label--l"
},
hint: {
text: '9 rhif yw hwn, weithiau â ‘GB’ ar y dechrau. Er enghraifft 123456789 neu GB123456789. Mae hwn i’w weld ar dystysgrif cofrestru TAW Anycompany.'
},
id: "vat-registration-number",
name: "vat-registration-number",
classes: "govuk-input--width-10"
})
}}
{{ govukButton({
text: "Yn eich blaen"
}) }}
Or you can ask for the VAT registration number as a normal form label, separate from the <h1>.
<div class="govuk-form-group">
<label class="govuk-label" for="vat-registration-number">
VAT registration number
</label>
<div id="vat-registration-number-hint" class="govuk-hint">
This is 9 numbers, sometimes with ‘GB’ at the start, for example 123456789 or GB123456789. You can find it on your VAT registration certificate.
</div>
<input class="govuk-input govuk-input--width-10" id="vat-registration-number" name="vat-registration-number" type="text" aria-describedby="vat-registration-number-hint">
</div>
<div class="govuk-form-group">
<label class="govuk-label" for="vat-registration-number">
Rhif cofrestru TAW
</label>
<div id="vat-registration-number-hint" class="govuk-hint">
9 rhif yw hwn, weithiau â ‘GB’ ar y dechrau. Er enghraifft 123456789 neu GB123456789. Mae hwn i’w weld ar eich tystysgrif cofrestru TAW.
</div>
<input class="govuk-input govuk-input--width-10" id="vat-registration-number" name="vat-registration-number" type="text" aria-describedby="vat-registration-number-hint">
</div>
{% from "govuk/components/input/macro.njk" import govukInput %}
{{
govukInput({
label: {
text: "VAT registration number"
},
hint: {
text: 'This is 9 numbers, sometimes with ‘GB’ at the start, for example 123456789 or GB123456789. You can find it on your VAT registration certificate.'
},
id: "vat-registration-number",
name: "vat-registration-number",
classes: "govuk-input--width-10"
})
}}
{% from "govuk/components/input/macro.njk" import govukInput %}
{{
govukInput({
label: {
text: "Rhif cofrestru TAW"
},
hint: {
text: '9 rhif yw hwn, weithiau â ‘GB’ ar y dechrau. Er enghraifft 123456789 neu GB123456789. Mae hwn i’w weld ar eich tystysgrif cofrestru TAW.'
},
id: "vat-registration-number",
name: "vat-registration-number",
classes: "govuk-input--width-10"
})
}}
Use a single text input and allow the user to enter 9 numbers with or without spaces or ‘GB’ at the start. Remove the spaces and the ‘GB’ before validating.
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 a VAT registration number is
- where they can find it
- what it looks like
- an example — if you show an example, always use ‘123456789’
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 a VAT registration number is
- need help to know what a VAT registration number looks like
If it is the company the user works for, use ‘your VAT registration number’. If it is not the company the user works for, use the company's name, for example ‘Anycompany’s VAT registration number’.
Error messages
Error messages should be styled like this:
<div class="govuk-form-group govuk-form-group--error">
<label class="govuk-label" for="vat-registration-number">
VAT registration number
</label>
<div id="vat-registration-number-hint" class="govuk-hint">
This is 9 numbers, sometimes with ‘GB’ at the start, for example 123456789 or GB123456789. You can find it on your VAT registration certificate.
</div>
<p id="vat-registration-number-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> Enter your VAT registration number
</p>
<input class="govuk-input govuk-input--width-10 govuk-input--error" id="vat-registration-number" name="vat-registration-number" type="text" aria-describedby="vat-registration-number-hint vat-registration-number-error">
</div>
<div class="govuk-form-group govuk-form-group--error">
<label class="govuk-label" for="vat-registration-number">
Rhif cofrestru TAW
</label>
<div id="vat-registration-number-hint" class="govuk-hint">
9 rhif yw hwn, weithiau â ‘GB’ ar y dechrau. Er enghraifft 123456789 neu GB123456789. Mae hwn i’w weld ar eich tystysgrif cofrestru TAW.
</div>
<p id="vat-registration-number-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Gwall:</span> Nodwch eich rhif cofrestru TAW
</p>
<input class="govuk-input govuk-input--width-10 govuk-input--error" id="vat-registration-number" name="vat-registration-number" type="text" aria-describedby="vat-registration-number-hint vat-registration-number-error">
</div>
{% from "govuk/components/input/macro.njk" import govukInput %}
{{
govukInput({
label: {
text: 'VAT registration number'
},
hint: {
text: 'This is 9 numbers, sometimes with ‘GB’ at the start, for example 123456789 or GB123456789. You can find it on your VAT registration certificate.'
},
errorMessage: {
text: 'Enter your VAT registration number'
},
id: 'vat-registration-number',
name: 'vat-registration-number',
classes: 'govuk-input--width-10'
})
}}
{% from "govuk/components/input/macro.njk" import govukInput %}
{{
govukInput({
label: {
text: 'Rhif cofrestru TAW'
},
hint: {
text: '9 rhif yw hwn, weithiau â ‘GB’ ar y dechrau. Er enghraifft 123456789 neu GB123456789. Mae hwn i’w weld ar eich tystysgrif cofrestru TAW.'
},
errorMessage: {
text: 'Nodwch eich rhif cofrestru TAW',
visuallyHiddenText: 'Gwall'
},
id: 'vat-registration-number',
name: 'vat-registration-number',
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 VAT registration number is empty
Say ‘Enter [whatever it is]’. For example, ‘Enter your VAT registration number’.
If the VAT registration number is in the wrong format
Say ‘Enter [whatever it is] in the correct format’.
For example, ‘Enter your VAT registration number 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. Research has also shown users need help to know:
- what their VAT registration number looks like
- where they can find their VAT registration number
We need more research. If you’ve used this pattern, get in touch to share your user research findings.