---
title: "Form save bar"
description: "The SaveBar of a TanStack form (from the form entry): it shows while the values differ from the saved ones, is pending while the form saves, says why a save was refused, and Discard resets the form."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Form save bar

## Settings form

Change a value, then undo it: the bar steps aside. Save, and it says what the save did.

```tsx
import { useState } from 'react';
import { SettingGroup, SettingRow } from '@arbol-ai/ui';
import { FormSaveBar, useAppForm } from '@arbol-ai/ui/form';

interface Clinic {
  name: string;
  greeting: string;
}

const ClinicSettings = () => {
  const [isSaved, setIsSaved] = useState(false);
  const form = useAppForm({
    defaultValues: { name: 'Clínica Norte', greeting: 'Hi, this is Clínica Norte.' } satisfies Clinic,
    onSubmit: ({ value }) => {
      // What was saved becomes the form's defaults, so the bar steps aside.
      form.reset(value);
      setIsSaved(true);
    },
  });
  return (
    <form.AppForm>
      <form.Form aria-label="Clinic settings" className="max-w-xl gap-6">
        <SettingGroup title="Clinic">
          <SettingRow label="Name" layout="stacked">
            <form.AppField name="name">{(field) => <field.TextField aria-label="Name" />}</form.AppField>
          </SettingRow>
          <SettingRow label="Greeting" layout="stacked">
            <form.AppField name="greeting">
              {(field) => <field.TextField aria-label="Greeting" multiline />}
            </form.AppField>
          </SettingRow>
        </SettingGroup>
        <FormSaveBar idle={isSaved ? 'All changes saved.' : undefined} />
      </form.Form>
    </form.AppForm>
  );
};

<ClinicSettings />
```

## Source

The examples above are [`src/form/form-save-bar.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/form/form-save-bar.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/forms/form-save-bar/index.mdx