We've saved your request. We saved it on December 2, 2022 at 5:25p.m. EST. Your request ID number is 15428.
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.
- 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 for this component is shown in the examples.
- Message content can be found in the example above or in engagement messages.
- This message is to be accompanied by text that reads: “We’ll save your application on every change.” and appears just below the Progress bar - Segmented component on Form - Step pages.
aria-describedbyto 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)