# 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 <code>data-save-bar</code> attribute to a [<code>form</code> element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) and will display the save bar when there are unsaved changes. The [<code>submit</code>](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event) event fires when the form is submitted or when the Save button is pressed. The [<code>reset</code>](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset_event) 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](/docs/api/app-bridge-library/web-components/ui-save-bar).
### Save Bar
```html
<form
data-save-bar
onsubmit="console.log('submit', new FormData(event.target)); event.preventDefault();"
>
<label>
Name:
<input name="username" />
</label>
</form>
```
## saveBar
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.
### _SaveBarApi
### hide
Hides the save bar element. An alternative to the `hide` instance method on the `ui-save-bar` element.
### leaveConfirmation
Show leave confirmation dialog if necessary. This promise is resolved when there is no visible save bar or user confirms to leave.
### show
Shows the save bar element. An alternative to the `show` instance method on the `ui-save-bar` element.
### toggle
Toggles the save bar element visibility. An alternative to the `toggle` instance method on the `ui-save-bar` element.
## Related
- [ui-save-bar](/docs/api/app-bridge-library/web-components/ui-save-bar)
- [SaveBar](/docs/api/app-bridge-library/react-components/savebar-component)
## Examples
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 <code>data-save-bar</code> attribute to a [<code>form</code> element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) and will display the save bar when there are unsaved changes. The [<code>submit</code>](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event) event fires when the form is submitted or when the Save button is pressed. The [<code>reset</code>](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset_event) 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](/docs/api/app-bridge-library/web-components/ui-save-bar).
### Save bar configured through the data-save-bar attribute
### Subscribe to Discard
```html
<form
data-save-bar
onreset="console.log('discarding')"
>
<label>
Name:
<input name="username" />
</label>
</form>
```
```html
<form data-save-bar>
<label>
Name:
<input name="username" />
</label>
</form>
<script>
const form = document.querySelector('form');
form.addEventListener('reset', (e) => {
console.log('discarding');
});
</script>
```
### Subscribe to Save
```html
<form
data-save-bar
onsubmit="console.log('submitting');"
>
<label>
Name:
<input name="username" />
</label>
</form>
```
```html
<form data-save-bar>
<label>
Name:
<input name="username" />
</label>
</form>
<script>
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
console.log('submitting');
});
</script>
```
### Showing a discard confirmation modal
```html
<form
data-save-bar
data-discard-confirmation
onsubmit="console.log('submit', new FormData(event.target)); event.preventDefault();"
>
<label>
Name:
<input name="username" />
</label>
</form>
```
### Showing the save bar with the saveBar API
```html
<ui-save-bar id="my-save-bar"></ui-save-bar>
<button onclick="shopify.saveBar.show('my-save-bar')">Show</button>
<button onclick="shopify.saveBar.hide('my-save-bar')">Hide</button>
```