Name

Contents

– User needs
– How it works
– Services where this pattern is used
– Status
– Error messages
– Accessibility statement
– Code examples
– Research into this pattern
– Link to next related pattern
– Date of creation + review date
– Discuss this pattern

---

User needs

This pattern was created to make it as easy as possible for a user to enter their name. Use this pattern each time you need to ask for a user’s name as part of the service. You must only ask for people’s names if you need that information to deliver a service.

How it works

Use multiple fields to ask for a user’s name. Multiple name fields can accommodate a broad range of name types and means you can reliably extract parts of a name. The fields must be long enough to accommodate the users’ name, use data about existing users to do this.

Labelling name fields

Use:

• ‘Title’
• ‘First name’
• ‘Last name’

When to use ‘Title’

Try and avoid asking for a person’s title, it’s extra work for the user, and you’re asking them to potentially reveal their gender or marital status.
For some services, the title is mandatory as the backend system requires it. When using a title, it must be an open text box to allow the user to enter their content.

Use the autocomplete attribute on name fields

Use the autocomplete attribute when asking for a user’s name. This lets browsers autofill the information on a user’s behalf if they’ve entered it previously.

If you are asking users to enter their name in multiple fields, set the autocomplete attribute on both fields using:

• For fields labelled ‘First name’
• For fields labelled ‘Last name’

Do not spellcheck user’s names

Sometimes, browsers will spellcheck the information a user enters into a text input. To make sure the user’s names will not be spellchecked, set the spellcheck attribute to false.

Services where this pattern is used and link to test example.

Please click the link to explore what service this pattern is used in: Link-to-master-file.

Status

Working progress

Error messages

• Check the postcode and try again

Accessibility statement

This pattern has a rating of: AA

Accessibility testing is the process of testing the pattern for ease of use with specific disabilities. Please see our accessibility guidelines.

Improvements

To make it AAA, we need to:

• Add...

Code examples/links to GDS

<div class="govuk-form-group govuk-form-group--error">
 <label class="govuk-label" for="address-postcode">
   Postcode
 </label>
 <span id="address-postcode-error" class="govuk-error-message">
   <span class="govuk-visually-hidden">Error:</span> Check the postcode and try again
 </span>
 <input class="govuk-input govuk-input--width-10 govuk-input--error" id="address-postcode" name="address-postcode" type="text" value="Not a postcode" aria-describedby="address-postcode-error" autocomplete="postal-code">
</div>

Research into this pattern

GOV.UK

Link to next related pattern

Pattern 1
Pattern 2

Date of creation + review date

This pattern was created ..** and will be review ..**

Discuss this pattern