🚀 We value your input in shaping our future plans. Take charge and have a direct impact by participating in our survey.


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


General name field

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

Multiline name field

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

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.

Last updated 22 November 2023

Latest version 2.2.0