# 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
&lt;form
  data-save-bar
  onsubmit="console.log('submit', new FormData(event.target)); event.preventDefault();"
&gt;
  &lt;label&gt;
    Name:
    &lt;input name="username" /&gt;
  &lt;/label&gt;
&lt;/form&gt;

```


## 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
&lt;form
  data-save-bar
  onreset="console.log('discarding')"
&gt;
  &lt;label&gt;
    Name:
    &lt;input name="username" /&gt;
  &lt;/label&gt;
&lt;/form&gt;

```

```html
&lt;form data-save-bar&gt;
  &lt;label&gt;
    Name:
    &lt;input name="username" /&gt;
  &lt;/label&gt;
&lt;/form&gt;

&lt;script&gt;
  const form = document.querySelector('form');
  form.addEventListener('reset', (e) =&gt; {
    console.log('discarding');
  });
&lt;/script&gt;

```


### Subscribe to Save

```html
&lt;form
  data-save-bar
  onsubmit="console.log('submitting');"
&gt;
  &lt;label&gt;
    Name:
    &lt;input name="username" /&gt;
  &lt;/label&gt;
&lt;/form&gt;

```

```html
&lt;form data-save-bar&gt;
  &lt;label&gt;
    Name:
    &lt;input name="username" /&gt;
  &lt;/label&gt;
&lt;/form&gt;

&lt;script&gt;
  const form = document.querySelector('form');
  form.addEventListener('submit', (e) =&gt; {
    console.log('submitting');
  });
&lt;/script&gt;

```


### Showing a discard confirmation modal

```html
&lt;form
  data-save-bar
  data-discard-confirmation
  onsubmit="console.log('submit', new FormData(event.target)); event.preventDefault();"
&gt;
  &lt;label&gt;
    Name:
    &lt;input name="username" /&gt;
  &lt;/label&gt;
&lt;/form&gt;

```


### Showing the save bar with the saveBar API

```html
&lt;ui-save-bar id="my-save-bar"&gt;&lt;/ui-save-bar&gt;

&lt;button onclick="shopify.saveBar.show('my-save-bar')"&gt;Show&lt;/button&gt;
&lt;button onclick="shopify.saveBar.hide('my-save-bar')"&gt;Hide&lt;/button&gt;

```