# FormFooter

> Action row of a form: cancel and submit on the end, an optional dirty hint on the start.

Source: https://ui.jcsoftdev.com/docs/components/form-footer

Action row of a form: cancel and submit on the end, an optional dirty hint on the start.
Sticky by default, so the actions stay in reach in a long form or a drawer. Place it inside the
`<form>` so the submit button submits it.

## Import

```ts
import { FormFooter } from "@jcsoftdev/ui/forms";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/forms/form-footer`.

## Usage

```tsx
<FormFooter dirty={false} busy={false} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onCancel` | `(() => void)` |  | Called by the cancel button; without it no cancel button renders. |
| `cancelLabel` | `string` |  |  |
| `submitLabel` | `string` |  | Default: the localized "Save". |
| `busy` | `boolean` |  | Submit in flight: the submit button is busy (stays focusable, ignores presses), cancel is disabled. |
| `dirty` | `boolean` |  | Shows the localized "Unsaved changes" hint (polite live region) beside the actions. |
| `submitDisabled` | `boolean` |  | Disables the submit button, e.g. while the form is invalid. |
| `hint` | `ReactNode` |  | Replaces the dirty hint text. |
| `children` | `ReactNode` |  | Extra actions placed before cancel. |
| `sticky` | `boolean` | `true` | Pins the footer to the bottom of its scroll container. Default `true`. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/forms-formfooter--default)
- [Dirty](/storybook/?path=/story/forms-formfooter--dirty)
- [Busy](/storybook/?path=/story/forms-formfooter--busy)
- [Sticky In Scrolling Form](/storybook/?path=/story/forms-formfooter--sticky-in-scrolling-form)

## Source

`packages/ui/src/forms/form-footer/form-footer.tsx`