Names
On this page
<div class="cads-form-field">
<div class="cads-form-field__content">
<label class="cads-form-field__label" id="name-label" for="name-input">
Full name
</label>
<input type="text" id="name-input" name="name" aria-required="true" aria-invalid="false" class="cads-input" autocomplete="name" spellcheck="false">
</div>
</div>
<%= render CitizensAdviceComponents::TextInput.new(
name: "name",
label: "Full name",
type: :text,
options: {
additional_attributes: { autocomplete: "name", spellcheck: false }
}
) %>
Names are important to users. We should ask for users’ names in a way that’s inclusive and helps them feel respected. This helps us build inclusive digital services.
When to use
You should follow this pattern if you need to ask for people’s names. Only ask for a user’s name if you need it to provide your service.
How it works
Make it as easy as possible for users to enter their name.
Single or multiple name fields
You should use a full name field because not everyone’s name fits a first-name and last-name format.
Using multiple name fields means some users might not be able to enter their full name. There’s a risk a user might enter their name entered incorrectly.
If you need to extract parts of a user’s name
If you need to extract parts of someone’s name, you could use a full name field and a preferred name field. You should test this with your users.
If you need to extract someone’s official name you could use a first and last name field.
<div class="cads-form-field">
<div class="cads-form-field__content">
<label class="cads-form-field__label" id="preferred-name-label" for="preferred-name-input">
What's your preferred name?
</label>
<p class="cads-form-field__hint" id="preferred-name-hint" data-testid="hint-message">This is the name we’ll use when we contact you</p>
<input type="text" id="preferred-name-input" name="preferred-name" aria-required="true" aria-invalid="false" aria-describedby="preferred-name-hint" class="cads-input" autocomplete="name" spellcheck="false">
</div>
</div>
<%= render CitizensAdviceComponents::TextInput.new(
name: "preferred-name",
label: "What's your preferred name?",
type: :text,
options: {
hint: "This is the name we’ll use when we contact you",
additional_attributes: { autocomplete: "name", spellcheck: false }
}
) %>
Middle names
Only ask for middle names if your service needs them.
Avoid asking for a title
Avoid asking users for their title because:
- it’s extra work for them
- it asks for personal information gender or marital status which they might not want to give
Name input
If your service allows it your full name field should:
- allow all special characters, including numbers and symbols
- let people use spaces or names in a different order
- be long enough for names that don’t follow a first and last name structure
- not change what the user has entered - for example, by automatically capitalising letters
Use autocomplete attribute on name fields
When asking for a user’s name, use the autocomplete attribute on the field component. This lets the browser autofill the information if the user has entered it previously.
You’ll need to do this to meet WCAG 2.2 success criterion ‘1.3.5 Identify input purpose’.
Do not spellcheck users’ names
Browsers sometimes try to correct spelling in form fields. This can make unhelpful assumptions about people’s names.
To prevent this, set the spellcheck attribute to false.
<div class="cads-form-field">
<div class="cads-form-field__content">
<label class="cads-form-field__label" id="name-label" for="name-input">
Full name
</label>
<input type="text" id="name-input" name="name" aria-required="true" aria-invalid="false" class="cads-input" autocomplete="name" spellcheck="false">
</div>
</div>
<%= render CitizensAdviceComponents::TextInput.new(
name: "name",
label: "Full name",
type: :text,
options: {
additional_attributes: { autocomplete: "name", spellcheck: false }
}
) %>
Error messages
You should style error messages like this example. Make sure your error messages are clear and helpful. You should think about the different reasons an error might happen and write specific messages for each one.
<div class="cads-error-summary js-error-summary" data-testid="error-summary" aria-labelledby="error-summary-title" aria-live="assertive" role="alert" tabindex="0">
<h2 id="error-summary-title" class="cads-error-summary__title">
There is a problem
</h2>
<ul class="cads-error-summary__list">
<li>
<a href="#name-error-input" class="js-error-summary-link">
Enter your full name
</a>
</li>
</ul>
</div>
<div class="cads-form-field cads-form-field--has-error">
<div class="cads-form-field__error-marker"></div>
<div class="cads-form-field__content">
<label class="cads-form-field__label" id="name-error-label" for="name-error-input">
Full name
</label>
<p class="cads-form-field__error-message" id="name-error-error" data-testid="error-message">
Enter your full name
</p>
<input type="text" id="name-error-input" name="name-error" aria-required="true" aria-invalid="true" aria-describedby="name-error-error" class="cads-input" autocomplete="name" spellcheck="false">
</div>
</div>
<%= render CitizensAdviceComponents::ErrorSummary.new(
# Disable autofocus.
# For example purposes only, in production you should leave this enabled
autofocus: false
) do |c| %>
<% c.with_errors([{ href: "#name-error-input", message: "Enter your full name" }]) %>
<% end %>
<%= render CitizensAdviceComponents::TextInput.new(
name: "name-error",
label: "Full name",
type: :text,
options: {
error_message: "Enter your full name",
additional_attributes: { autocomplete: "name", spellcheck: false }
}
) %>
Research on this pattern
If you research on this pattern, you might be able to help improve it. Get in touch on the design system community Slack channel.
Questions and contributions
For National Citizens Advice staff you can find us in the #design-system channel on Slack. For open issues, roadmap, and source code see the GitHub project.