Names

Follow this pattern whenever you need to ask users for their name.

When to use this pattern

Only ask for a name if you genuinely need it for your service. Consider whether you could use an email address or reference number instead.

How it works

In most cases, you should ask for a full name using a single text field.

Single name field

This is the simplest approach and works for most services.

<div class="form-group">
  <label class="form-label" for="full-name">Full name</label>
  <input class="form-input" id="full-name" type="text" autocomplete="name" spellcheck="false">
</div>

Multiple name fields

Only use multiple fields if your service has a specific need, such as:

• the name must match an official document
• you need to address the user formally
• data must be stored in separate fields

<fieldset class="form-group">
  <legend class="form-label form-label-lg">What is your name?</legend>
  <span class="form-hint">Enter your name as it appears on your official documents.</span>

  <div class="form-group">
    <label class="form-label" for="first-name">First name</label>
    <input class="form-input" id="first-name" type="text" autocomplete="given-name" spellcheck="false">
  </div>

  <div class="form-group">
    <label class="form-label" for="last-name">Last name</label>
    <input class="form-input" id="last-name" type="text" autocomplete="family-name" spellcheck="false">
  </div>
</fieldset>

With title

Only ask for a title if your service genuinely requires it, such as for formal correspondence.

Example names for testing

Use these example names to test your name fields work with various formats and special characters:

Avoid assumptions

• Do not assume everyone has a first name and last name
• Do not assume names are in a particular format or length
• Allow special characters like hyphens, apostrophes, and accents
• Do not limit the length of name fields unnecessarily

Error messages

If name is empty

"Enter your full name" or "Enter your first name"

If name contains invalid characters

"Full name must only include letters a to z, hyphens, spaces, and apostrophes"

Accessibility

• Use autocomplete attributes for name fields
• Set spellcheck="false" to prevent spell-check suggestions
• Do not use inputmode or pattern - names vary widely