Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Patterns

Help users to…

Know when their information is prefilled

Use with caution: Candidate
Follow this pattern to help users know when their information will be prefilled for them in an application.

Usage

When to use this pattern

  • When you prefill the user’s data into an application, like a form. When using this pattern, clearly inform the user of where their data is being pulled from to prefill for them.
  • When users can update prefilled information. Review Help users to… Know how their information is updated for guidance on helping users update this prefilled information.

Design principles

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. But, when forms don’t require users to be signed in, they should see an information alert describing benefits to signing in. View the unauthenticated intro page alert later described on this page.

When to use caution

  • When prefilling data from a source other than VA Profile. It is crucial to explain to the user exactly where the data is coming from so that if there are any errors in the data, it is clear how to correct them.

How to design and build

Anatomy or layout details

This pattern involves these types of pages 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.
  • Personal information page: Usually the first page of a form after the user signs in. Has personal details that cannot be edited online, like name, date of birth, Social Security number, etc.
  • Prefill check page: Any page of a form that displays prefilled information users can edit within the form.

Introduction page

There are two states of an introduction page: Authenticated and Unauthenticated.

A form introduction page viewed by an authenticated user with an alert that the form will fill parts of their application based on the their account details. Annotations state that alerts should be placed at the top of the page and the word 'note' in the alert should be bolded.
Authenticated introduction page alert on the introduction page.
An alert encouraging users to sign in to save time and save work in progress. A note at the bottom shares that applicants can sign in after they start their application, but will lose any information already filled in.
Unauthenticated introduction page alert on the introduction page.

Personal information page

A Veteran information page in a form flow with an uneditable card containing the Veteran's name, privacy masked Social Security number, date of birth, and gender. Below the card is a note explaining why the content can't be edited in the form and how to update this information. An annotation states that the gray card might be replaced in future iterations of the pattern.
Uneditable prefilled information on the personal information page.

Prefill check page

A Veteran information page in a form flow with an alert followed by a white editable card containing the Veteran's mailing address. The alert states that the form has prefilled some of the Veteran's information. Annotations state that alerts should be placed at the top of the page, and that the white card might be replaced in future iterations of the pattern.
Editable prefilled information displayed on the Prefill check page. This is the proposed style to display data that is editable.

How this pattern works

Communicate when and why information will be prefilled

This pattern communicates when and why information will be prefilled with:

  • Unauthenticated intro page alert. This tells users they should expect prefilled information in a form after they sign in. The alert also encourages users to sign in to benefit from this time-saving feature.
  • Authenticated intro page alert. This alert tells users that some of their information may be prefilled for them because they are signed in.

Communicate information that cannot be edited

This pattern communicates information that cannot be edited with:

  • Uneditable prefilled information displayed in a card. Prefilled information (such as legal name, date of birth, and Social Security number) is displayed in a card component.
  • Directions for updating uneditable information. Helper text is added under the card that has the bolded word “note” and directions to update this information offline. For additional guidance on helping users update prefilled information, see the “Help users to… Know how their information is updated” pattern which will be updated soon.

Communicate information that can be edited

This pattern communicates information that can be edited with:

  • Editable prefilled information displayed in a card with an edit link. Prefilled information that is editable is displayed in a card component with a link to edit the information. For additional guidance on helping users update prefilled information, see the “Help users to… Know how their information is updated” pattern which will be updated soon.

Components used in this pattern

Examples

Uneditable Prefill Card

View uneditable prefill alert in Storybook

Editable Prefill Card

View editable prefill alert in Storybook

Signed In Prefill Alert

View signed in prefill alert in Storybook

Unauthenticated Prefill Alert

View unauthenticated prefill alert in Storybook

Prefilled Info Alert

View prefilled info alert in Storybook

Examples in production

Coming soon!

Code usage

When using the va-card element to display prefilled information, ensure that the correct structure of the html is present. The description list <dl> and unordered list <ul> elements can be useful for displaying several pieces of uneditable data.

Uneditable information

Here is some example markup for a card of uneditable content that utilizes a description list.

<va-card background>
  <div class="vads-u-padding--4 vads-u-margin--0">
    <dl>
      <dt class="vads-u-font-weight--bold">Name</dt>
      <dd>Godzilla</dd>
      <dt class="vads-u-font-weight--bold">Born</dt>
      <dd>1952</dd>
      <dt class="vads-u-font-weight--bold">Birthplace</dt>
      <dd>Japan</dd>
      <dt class="vads-u-font-weight--bold">Color</dt>
      <dd>Green</dd>
    </dl>
  </div>
</va-card>

Editable information

If a user can update their information, than pieces of information can be shown with a heading followed by the information itself, along with an edit link.

<va-card show-shadow="true">

  <h4 class="vads-u-width--auto vads-u-margin-top--0">
    Email address
  </h4>

  <p>testemail1234@unattended.com</p>

  <va-link
    label="Edit email address"
    href="/link-here"
    text="Edit"
    active
  />

</va-card>

View more prefill card examples on storybook

Prefilled info alert

A prefill info alert tells users that some information on a form has been prefilled.

<va-alert status="info">
  <p class="vads-u-margin-y--0">
    <strong>Note:</strong> We've prefilled some of your information from your account.
    If you need to correct anything, you can select edit below.
    All updates will be made only to this form.
  </p>
</va-alert>

View mort prefill alert examples on storybook

Content considerations

Directions for updating uneditable information

Directions for updating information that can’t be updated online vary. So directions should be updated based on the context of the form or application used. CAIA is currently working on finalizing some base language to be included, but general guidelines are:

  • If it’s benefits-related, include the content that has the VA benefits hotline
  • If it’s health-related, include the content that has the VA benefits hotline AND the content to contact your local medical center

Unauthenticated intro page alert

[heading] Sign in with a verified account

[content] Here’s how signing in with an identity-verified account helps you:

  • We can fill in some of your information for you to save you time.
  • You can save your work in progress. You’ll have {time limit} from when you start or make changes to submit your form.

After you sign in, we’ll tell you if you need to verify your identity for your account.

Note: You can sign in after you start filling out your form. But you’ll lose any information you already filled in.

[button] Sign in or create an account

[text link] Start your form without signing in

Unauthenticated introduction page alert

Authenticated intro page alert

[content] Note: Since you’re signed in to your account, we can prefill part of your form based on your account details. You can also save your form in progress and come back later to finish filling it out.

Authenticated alert for introduction page

Authenticated contextual alert

[content] Note: We’ve prefilled some of your information from your account. If you need to correct anything, you can select edit below. All updates will be made only to this form.

Authenticated alert for a form application page

Research findings

The Authenticated Experience Design Patterns team conducted user research to gather validation about this pattern.

Edit this page in GitHub (Permissions required)
Last updated: Nov 06, 2024