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 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)

Provide feedback

Share your feedback, report issues, or suggest improvements for the Autosave component. Your input helps us make the design system better for everyone.

• Get immediate support in #platform-design-system for technical or urgent issues.
• Explore all feedback channels for additional ways to share your input.