FormFooter

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

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

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

Usage

<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
• Dirty
• Busy
• Sticky In Scrolling Form

Source

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