# Save bar The bar at the foot of a form that says what is not saved yet and offers to save or discard it. It sticks to the bottom of the screen while the form is longer than the screen. ## Examples At rest the bar says everything is saved; with unsaved changes it turns `save-bar-dirty` and names them. ```html

All changes saved

2 unsaved changes: product name, accent color

``` ### Refused and saved The page sets the bar's `data-state` after a save: `error` in the danger tone, its words saying which fields the server refused; `saved` in the success tone, which fades back to the bar at rest after two seconds; under reduced motion it stays until the page changes it. ```html

2 fields refused: the address is taken, the price is below the child price

Saved at 14:05

``` ### The fields that changed `data-changed`, set by the page, marks a field whose value differs from the saved one: a bar at the start of a `form-control` or a `form-select` - a combobox's button is one - and a dot after a check or a switch. On a tab it is a dot too. ```html

Name

Shown on the site ``` ## Accessibility - The bar is a region named after what it holds; its words name the changes, not only their count. - It does not print, and it never hides the last field of the form: the form keeps room under it. - A changed field's mark is drawn, not read out: the bar's words name the changes. In forced colors the mark is a thicker start border. ## Tokens From [`css/components/save-bar.css`](https://github.com/redz-tech/REDZ.UI/blob/main/css/components/save-bar.css), which declares no custom property of its own. It reads the theme's `--redz-space-12`, `--redz-space-8`, `--redz-space-16`, `--redz-border`, `--redz-radius-12`, `--redz-bg-raised`, `--redz-shadow-2`, `--redz-text-muted`, `--redz-fs-12`, `--redz-warning`, `--redz-warning-subtle`, `--redz-danger`, `--redz-danger-subtle`, `--redz-success`, `--redz-success-subtle`.