---
title: "Save bar"
description: "The foot of a page form: Save, Discard and what is pending, floating above the bottom of the page while something is unsaved. A clean form shows no bar, only what the last save did."
---

> 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.

# Save bar

## Settings form

Change the name to see the bar; Save keeps the focus while it saves. Clear the name and save to see a failed save.

```tsx
import { useState } from 'react';
import { SaveBar } from '@arbol-ai/ui';

const SAVED_NAME = 'Clínica Norte';

const SettingsForm = () => {
  const [name, setName] = useState(SAVED_NAME);
  const [savedName, setSavedName] = useState(SAVED_NAME);
  const [isPending, setIsPending] = useState(false);
  const [idle, setIdle] = useState<string>();
  const [error, setError] = useState<string | null>(null);
  return (
    <form
      className="max-w-md space-y-2"
      id="clinic-name"
      onSubmit={(event) => {
        event.preventDefault();
        if (name.trim() === '') {
          setError('We couldn’t save: the clinic needs a name.');
          return;
        }
        setIsPending(true);
        setTimeout(() => {
          setSavedName(name);
          setIsPending(false);
          setIdle('All changes saved.');
        }, 1200);
      }}
    >
      <label className="block text-sm font-medium" htmlFor="clinic-name-input">
        Clinic name
      </label>
      <input
        className="rounded-field bg-gray-a2 h-8 w-full border px-3 text-sm"
        id="clinic-name-input"
        onChange={(event) => {
          setName(event.target.value);
          setError(null);
        }}
        value={name}
      />
      <SaveBar
        error={error}
        form="clinic-name"
        idle={idle}
        isDirty={name !== savedName}
        isPending={isPending}
        onDiscard={() => {
          setName(savedName);
          setError(null);
        }}
      />
    </form>
  );
};

<SettingsForm />
```

## Source

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

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