Name

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

Examples

General name field

 
<div class="sgds form-group">
    <label class="form-label" for="fullName">Full Name as per NRIC</label>
    <input class="form-control" type="text" id="fullName" autocomplete="name" required />
</div>

                

Multiline name field

 
<div class="sgds form-group mb-3">
    <label class="form-label" for="givenName">Given Name</label>
    <input class="form-control" type="text" id="givenName" autocomplete="given-name" required />
</div>
<div class="sgds form-group">
    <label class="form-label" for="familyName">Family Name</label>
    <input class="form-control" type="text" id="familyName" autocomplete="family-name" required />
</div>

                

Usability guidelines

Labeling of name fields

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

General name fields
  • This accommodates the widest range of name types and formats.
  • Reduces the risk of users entering their name in the incorrect format.
  • Set the autocomplete attribute to name so that browsers can fill in their name if they have entered in previously.

Multiline name fields
  • Use multiple name fields with discretion. Not everyone's name fits the general first-name, last-name convention.
  • Using multiple name fields increases the risk of a person's name not fitting the same convention. Hence, it may be entered incorrectly.
  • Set the autocomplete attributes to given-name and family-name so that browsers can fill in their names if they have entered in previously.

Home


Previous version 2.0.0