Names

Use this pattern when you need to ask users for their names


General name field

<div class="field">
    <label class="label" for="name">Full Name</label>
    <div class="control">
        <input
            class="input col is-8"
            type="text"
            id="name"
            name="name"
            type="text"
            autocomplete="name"
            spellcheck="false"
        />
    </div>
</div>

When you should use this pattern

You should follow this pattern when you need to ask for a user’s name and only ask for names if you need it for a service.


Multiline name field

<div class="field">
    <label class="label" for="given-name">Given Name</label>
    <div class="control">
        <input
            class="input col is-8"
            type="text"
            id="given-name"
            name="given-name"
            type="text"
            autocomplete="given-name"
            spellcheck="false"
        />
    </div>
</div>
<div class="field margin--top--lg">
    <label class="label" for="family-name">Family Name</label>
    <div class="control">
        <input
            class="input col is-8"
            type="text"
            id="family-name"
            name="family-name"
            type="text"
            autocomplete="family-name"
            spellcheck="false"
        />
    </div>
</div>

When you should use this pattern

You should follow this pattern when you know that your users follow the given-name and family-name convention.


Guidelines

Make sure the name field works for your users

Name fields should be long enough to accomodate the names of your users. Do make sure that you support all characters that users may need to enter, including symbols and numbers.

Do ensure that you do not spellcheck a user's name by setting the spellcheck attribute to false

Single name fields

This can accomodate the widest range of name types and formats and is recommended to reduce the risk that your user's enter their name in the incorrect format. However by using this, you may not be able to extract parts of a name.

Multiple name fields

Use multiple name fields based on your user's needs. Not everyone's name fits the general first-name, last-name convention. Using multiple name fields increases the risk that a person's name will not fit the same convention and may be entered incorrectly.

Labelling of name fields

For single name fields, use "Full name".

For multiple name fields, use:

  • 'Given name'
  • 'Family name'

Do make it clear whether you are asking for a user's common name, or as written on a official document such as NRIC or passport.

If you are unsure of how your users will fill in their name or know that you have a wide range of users with different formats for their names, it is highly recommended to use a single name field.

This is to ensure that your users:

  • Do not get confused as to how they should be filling in their name
  • Reduce the risk that their name may be filled in wrongly

Autocomplete

Do use the autocomplete attribute when asking for a user's name. This makes it easier for the user to fill in their name if they have done so previously on the browser.

  • Full name: use name
  • Given name: use given-name
  • Family name: use family-name

You will need to include the autocomplete attribute to meet WCAG 2.1 AA for production.


Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Chat with the team