Help users to…

Know when their information is prefilled

Usage

When to use this pattern

• When you prefill a user’s information into an application, form, or other online tool. When using this pattern, clearly tell the user where their information is being pulled from to prefill for them.
• When users can update prefilled information. Review the “Help users to… Update prefilled information” pattern for guidance on helping users update this prefilled information.

When not to use this pattern

• For unauthenticated users. Users who aren’t signed in shouldn’t see their information prefilled when they interact with an application, form, or tool. But, when forms don’t require users to be signed in, they should get the Sign-in alert describing the benefits of signing in.
• When there’s no prefill data for the user.

When to use caution

• When prefilling data from a source other than the VA.gov API. It’s crucial to explain to users exactly where the data is coming from so that if there are any errors in the information, it’s clear how to correct those errors.

How to design and build

Anatomy or layout details

This pattern involves these types of sections found in VA.gov forms:

• Introduction page: The first page of a form. Introduces the process the Veteran or other beneficiary will follow to apply for a benefit or to complete a supporting form. Changes slightly after a user signs in.
• Prefilled information the user cannot update: This is usually personal information like name, date of birth, and Social Security number.
• Prefilled information the user can update: This can be many different types of information, like email addresses and mailing addresses, that the user can update directly on the screen where we display it.

Introduction page and sign in alerts

• Use the form introduction page templates. The existing templates are already updated to support this pattern for both the unauthenticated and authenticated experiences.
• Use the existing sign-in alert pattern that notifies a user that we will prefill their information will be prefilled when signing in.
• Use the prefill alert when the user is signed in to notify them that we prefilled some of their information.

How this pattern works

Communicate information that the user can edit

Here’s how to communicate that people can update certain information online:

• Display an edit link. Display prefilled information in a card component with a link to edit the information. This information may include contact information, such as a phone number, email address, or mailing address.
• Include a pathway to edit the information. Use the Help users to… Update prefilled information pattern when the user can update their information.

Communicate information that the user can’t edit

Here’s how to communicate that people can’t update certain information online:

• Omitting the edit link in cards with uneditable information. For information that the user can’t change online (such as legal name, date of birth, and Social Security number), remove the edit link within the card component.
• Include instructions for how to update uneditable information. Under the card with the uneditable information, display a note starting with the bolded word “Note:” followed by directions to help users find out how to update this information by phone or another way. These directions will vary by form or type of information. You’ll need to confirm that the directions are accurate for updating that specific type of information. See the Content considerations section.
• Consider adding a pathway for the user to correct their information for the form itself. Since information from the person’s profile may be inaccurate, it’s helpful to have this option. Clarify that since they can’t update the information online, we’ll only update the information they requested on the current form.

Components used in this pattern

• Alert - To inform the user about prefilled information and where we will save changes
• Alert - Sign-in - To inform the user that they can sign so we can prefill their information
• Card - To display prefilled information in organized sections
• Card - Status - To display prefilled information that the user can edit
• Link - To give the user an opportunity to make changes to their prefilled information
• Prefill - To inform the user before starting the form that we will prefill their information if they sign in
• Details - To provide expandable details about updating information

Examples

Signed in prefill alert

View signed in prefill alert in Storybook

Unauthenticated prefill alert

View unauthenticated prefill alert in Storybook

Editable prefill card

Uneditable prefill card

Example within a mock form

An example of the prefill pattern can be found in the Forms library mock form on staging. Sign in with any staging user.

Code Usage

Code for the prefill pattern can be found in the Forms library.

Content considerations

Directions for updating uneditable information

Directions for updating information that can’t be updated online vary by form and type of information. The “Help users to… Update Prefilled information” pattern has guidance for these directions.

Research findings

The Authenticated Experience Design Patterns team conducted user research in mid 2024 to gather validation about this pattern. The pattern was further tested as part of a late 2024 study by the same team.