Templates

Name form

Collect a full name as separate elements of data.

Name
For example, Jose, Darren, or Mai
For example, Martinez Gonzalez, Gu, or Smith
Full Name
For example, Prof. Madeline Martinez Hernandez
Preferred name
For example, Dr. Gu, Mrs. Schmidt, Alix Martinez 

<form class="usa-form usa-form--large margin-bottom-3">
  <fieldset class="usa-fieldset">
    <legend class="usa-legend usa-legend--large">Name</legend>
    <label class="usa-label" for="given-name">First or given name</label>
    <div class="usa-hint" id="gnHint">For example, Jose, Darren, or Mai</div>
    <input
      class="usa-input usa-input--xl"
      id="given-name"
      name="first-name"
      aria-describedby="gnHint"
    />
    <label class="usa-label" for="middle-name">Middle name</label>
    <input
      class="usa-input usa-input--xl"
      id="middle-name"
      name="middle-name"
    />
    <label class="usa-label" for="family-name">Last or family name</label>
    <div class="usa-hint" id="lnHint">
      For example, Martinez Gonzalez, Gu, or Smith
    </div>
    <input
      class="usa-input usa-input--xl"
      id="family-name"
      name="last-name"
      aria-describedby="lnHint"
    />
  </fieldset>
</form>
<form class="usa-form usa-form--large margin-bottom-3">
  <fieldset class="usa-fieldset">
    <legend class="usa-legend usa-legend--large">Full Name</legend>
    <label class="usa-label" for="full-name">Full name</label>
    <div class="usa-hint" id="fnHint">
      For example, Prof. Madeline Martinez Hernandez
    </div>
    <input
      class="usa-input usa-input--xl"
      id="full-name"
      name="full-name"
      aria-describedby="fnHint"
    />
  </fieldset>
</form>
<form class="usa-form usa-form--large">
  <fieldset class="usa-fieldset">
    <legend class="usa-legend usa-legend--large">Preferred name</legend>
    <label class="usa-label" for="preferred-name"
      >I prefer to be addressed as</label
    >
    <div class="usa-hint" id="pnHint">
      For example, Dr. Gu, Mrs. Schmidt, Alix Martinez
    </div>
    <input
      class="usa-input usa-input--xl"
      id="preferred-name"
      name="preferred-name"
      aria-describedby="pnHint"
    />
  </fieldset>
</form>

Guidance

When to use the name form template

  • You need separate data elements. Follow this pattern when you need to ask for a user’s name as part of your service. Only ask for a name if you need it.

When to consider something else

  • You don’t need separate data elements. If you don’t need to parse out the separate pieces of a person’s name, consider letting them enter it into a single text field.

Usability guidance

  • Label each field. Be sure each field is properly labeled.
  • Avoid select elements. Leave the title and suffix fields as text boxes instead of offering select menus. There are many possible titles and suffixes; text boxes accommodate them all.
  • Don’t restrict characters. Do not restrict the types of characters users can enter in any of these fields. Names can include characters outside the standard Roman alphabet.

Accessibility guidance

Related

Package

  • Package usage: @forward "usa-form-templates";