Ask users for…

Names

Usage

When to use this pattern

• When you need to collect a person’s name. For example, for contact information or to complete an application.

Note: These fields are not on every form. Work with your stakeholders to determine which fields are necessary for your application.

Examples

How to design and build

How this pattern works

The names pattern implements the following:

• First name and last name are required fields. Optional fields include:
  • Middle name
  • Suffix
  • Mother’s maiden name
• Make sure name fields work for most veterans. Fields must be long enough to accommodate the names of your users. Do not restrict the types of characters users can enter in any of these fields. Names can include characters outside the standard Roman alphabet.
• Pair with date of birth. Collection of full name is paired with date of birth. The two patterns typically appear on the same step/page.

Components used in this pattern

• Select for suffix, when necessary
• Text input

Page templates available for this pattern

Use the VADS templates (Patterns & Forms) for Names in Figma.

Code usage

fullNamePattern is a web-component pattern available in the Forms library.

Content considerations

Labels, error messages, and hint text

First or given name

Hint text: None

Error type: No entry

Error message: Enter a first or given name

Error type 2: Incorrect entry

Error message 2: You entered a character we can’t accept. Try removing "[specific characters entered]"

Middle name

Hint text: None

Error type: Invalid entry

Error message: You entered a character we can’t accept. Try removing "[specific characters entered]"

Last or family name

Hint text: None

Error type: No entry

Error message: Enter a last or family name

Error type 2: Incorrect entry

Error message 2: You entered a character we can’t accept. Try removing "[specific characters entered]"

Suffix

Hint text: None