Autosave

Examples

Default

Usage

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

• 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.

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)