Skip to main content
U.S. flag

An official website of the United States government

Components

Autosave

Use: Deployed
Informs the user that we will, and have, automatically saved their progress in a form flow.

Examples

Default

We've saved your request. We saved it on December 2, 2022 at 5:25p.m. EST. Your request ID number is 15428.

Usage

Testing has revealed issues with this component. See this Usability Report for more details.

When to use

  • When saving form flow progress as a user completes an application. This message provides confirmation to the user that their form progress is being saved as they progress through a form flow for an application.

When to consider something else

  • Unauthenticated users. Users who are unauthenticated should not see this message as we cannot save their progress.

How this component works

  • Use Alert - Slim. This component is an instance of the Alert - Slim component in the success state.

Placement

  • This component appears after the Button pair on a form page and before the link to “Finish this application later” on the authenticated variation of the Form - Step page.

Code usage

Code for this component is shown in the examples.

Content considerations

Accessibility considerations

  • Use aria-describedby to link a portion of the autosave message to the continue button. To do this add aria-describedby="save" to the Continue button and add a <span id="save"> around the first line of text in this component. This achieves the following:
    • Better ensures screen reader users will not miss the auto save message (which is located below the continue button)
    • Does not change the visual design of the page
    • Is flexible to the level of screen reader use (beginners are more likely to hear the auto-save message whereas advanced users won’t be bothered by it)
Edit this page in GitHub (Permissions required)
Last updated: Sep 03, 2024