# saveBarSync

> Why JS: a form cannot tell when its values differ from how it loaded, so script shows the save bar while it does, binds ⌘S/Ctrl+S to submitting it, and guards leaving the page.

```ts
import { saveBarSync } from "@sdxc/ui/app";
```

Applied to the bar (`[data-slot="save-bar"]`): unhides it while the form's values differ
from their baseline, which a submission moves to the submitted values, and ⌘S saves them
unless the form's own primary save answers it. `[role="status"]` announces `message`.

## Signature

```ts
saveBarSync(options: SaveBarSync.Options): MixinDescriptor<HTMLElement>
```

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `options` | `SaveBarSync.Options` |  |

## Examples

```tsx
<div hidden mix={[saveBarSync({ message: "Unsaved changes" })]}>…</div>
```

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/app` too.

### SaveBarSync.Options

Configuration for saveBarSync.

#### Members

| Member | Type | Description |
| --- | --- | --- |
| `form?` | `string` | The `id` of the watched form; omit when the bar sits inside it. |
| `message` | `string` | What the bar's live region announces once the form changes, such as "Unsaved changes". |