Skip to main content

Save Bar

The Save Bar API is used to indicate that a form on the current page has unsaved information. It can be used in 2 ways:

  1. It is automatically configured when you provide the data-save-bar attribute to a form element and will display the save bar when there are unsaved changes. The submit event fires when the form is submitted or when the Save button is pressed. The reset event fires when the form is reset or when the Discard button is pressed, which discards all unsaved changes in the form.

  2. It can be controlled declaratively through the ui-save-bar element. For more information, refer to the ui-save-bar component.

Anchor to savebarsaveBar

The saveBar API provides a show method to display a save bar, a hide method to hide a save bar, and a toggle method to toggle the visibility of a save bar. These are used in conjunction with the ui-save-bar element. They are alternatives to the show, hide, and toggle instance methods.

Anchor to leaveConfirmation
leaveConfirmation
() => Promise<void>
required

Show leave confirmation dialog if necessary. This promise is resolved when there is no visible save bar or user confirms to leave.

Anchor to hide
hide
(id: string) => Promise<void>

Hides the save bar element. An alternative to the hide instance method on the ui-save-bar element.

Anchor to show
show
(id: string) => Promise<void>

Shows the save bar element. An alternative to the show instance method on the ui-save-bar element.

Anchor to toggle
toggle
(id: string) => Promise<void>

Toggles the save bar element visibility. An alternative to the toggle instance method on the ui-save-bar element.

Was this section helpful?

Save Bar

<form
data-save-bar
onsubmit="console.log('submit', new FormData(event.target)); event.preventDefault();"
>
<label>
Name:
<input name="username" />
</label>
</form>

Preview

Anchor to examplesExamples

Save bar options, variations, and events

Anchor to example-save-bar-configured-through-the-data-save-bar-attributeSave bar configured through the data-save-bar attribute

Anchor to example-subscribe-to-discardSubscribe to Discard

Subscribing to the HTMLFormElement: reset event

Anchor to example-subscribe-to-saveSubscribe to Save

Subscribing to the HTMLFormElement: submit event

Anchor to example-showing-a-discard-confirmation-modalShowing a discard confirmation modal

Provide the data-discard-confirmation attribute to a form with the data-save-bar attribute to show a confirmation modal after the user clicks the Discard button of the save bar

Anchor to example-showing-the-save-bar-with-the-savebar-apiShowing the save bar with the saveBar API

Showing the save bar with the saveBar API

Was this section helpful?

Subscribe to Discard

<form
data-save-bar
onreset="console.log('discarding')"
>
<label>
Name:
<input name="username" />
</label>
</form>

Anchor to relatedRelated

Componentui-save-bar
ComponentSaveBar