---
url: "https://vueda.dev/v3/reference/api/vue/ActionForm.md"
title: "ActionForm"
---

# ActionForm

## Overview

Form shell that executes a server action, handles dry-run validation, shows success/error toasts, and provides confirm and cancel button slots.

Renders a pinned actions strip (confirm + cancel + optional hint) below the
form, or, with the `page` prop, a sticky action bar above it. When the form
has per-field errors that no rendered field shows beside itself, it also
renders a structured validation alert sourced from `formContext.state.errors`. The
alert sits with the non-field error block above the fields, so a reader meets
it before the first field and the submit control. Also mounts a `FormConfirmDialog`
bound to the action's confirmation controller, so actions the server gates
behind warning acknowledgement (HTTP 409) can be confirmed and retried. `ActionForm` renders no
warnings content of its own; a consumer that needs to render them (e.g. a bulk action grouping
per-object warnings by their display name) supplies the `form-confirm-dialog-warnings` slot,
which forwards FormConfirmDialog's `warnings` slot scope (`warnings`, the controller's raw
warnings mapping). Without that slot, `FormConfirmDialog`'s own default rendering shows through.

Theme entry: [ActionForm](/v3/reference/theming/keys/ActionForm.md)

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <span id="prop-iconOverride">iconOverride</span> | `Object` |  | `null` | A partial icon registry (`{ [componentName]: { [iconName]: { component, props } } }`) merged with inherited and default icon entries; scopes icon overrides to this component and its descendants. |
| <span id="prop-themeOverride">themeOverride</span> | `Object` |  | `null` | A partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants. |
| <span id="prop-runAction">runAction</span> | `func` |  | `undefined` | Function to execute the action. |
| <span id="prop-actionSuccessSummary">actionSuccessSummary</span> | `string` |  | `undefined` | Toast summary text shown when the action succeeds. |
| <span id="prop-actionErrorSummary">actionErrorSummary</span> | `string` |  | `undefined` | Toast summary text shown when the action fails. |
| <span id="prop-confirmMessage">confirmMessage</span> | `string` |  | `undefined` | Confirmation message displayed to the user before executing the action (reserved for future use). |
| <span id="prop-fetchState">fetchState</span> | `object` |  | `{     errored: false,     error: null,     loading: undefined }` | Reactive state object describing the data-fetch status (`errored`, `error`, `loading`). |
| <span id="prop-actionState">actionState</span> | `object` |  | `{     errored: false,     error: null,     loading: undefined }` | Reactive state object describing the action execution status (`errored`, `error`, `loading`). |
| <span id="prop-hasInput">hasInput</span> | `boolean` |  | `false` | Whether the form has user input fields that must be validated before submission. |
| <span id="prop-redirectTo">redirectTo</span> | `func` |  | `undefined` | Async function called to navigate away after a successful action or cancel; receives `"success"` or `"cancel"` as its argument. After success, the form stays locked until it unmounts unless the function resolves `false` to report that it did not navigate away. |
| <span id="prop-onSubmissionSuccessHandler">onSubmissionSuccessHandler</span> | `func` |  | `undefined` | Custom handler called on successful submission in place of the default success toast and redirect. |
| <span id="prop-onSubmissionErrorHandler">onSubmissionErrorHandler</span> | `func` |  | `undefined` | Custom handler called on submission error in place of the default error toast. |
| <span id="prop-onSubmissionWarningsRequireConfirmation">onSubmissionWarningsRequireConfirmation</span> | `func` |  | `undefined` | Custom handler called when the server requires confirmation of warnings (HTTP 409) in place of the default render-warnings-and-prompt behaviour. |
| <span id="prop-readyToDryRun">readyToDryRun</span> | `boolean` |  | `false` | When set to `true`, triggers a dry-run validation pass without submitting the form. |
| <span id="prop-dryRunTarget">dryRunTarget</span> | `string` |  | `undefined` | Identity of the current dry-run target (e.g. `useModelAction`'s joined pks). The dry-run watcher latches on this, firing once per distinct value rather than every time `readyToDryRun` recomputes to `true`. Omit it for a caller with no target concept; the watcher then fires at most once, ever. |
| <span id="prop-cancelButton">cancelButton</span> | `boolean` |  | `true` | When `false`, the default action bar has no cancel button. A view whose page title already offers a Go Back action sets this, so the page does not offer two ways back. |
| <span id="prop-page">page</span> | `boolean` |  | `false` | When `true`, the form fills a view's page. The default action bar renders first, in a top-zone StickyBar that stacks with the page title, and the confirm button stays tied to the form through its `form` attribute. The error display, the validation summary, and the form follow in the page gutter. Without a sticky stack, the bar still renders first and spans the page, as the detail views' action bar does. A form inside a dialog or a card leaves this off. |
| <span id="prop-requireModified">requireModified</span> | `boolean` |  | `true` | When `false`, skips the "no changes detected" guard. Defaults to `true`. Set to `false` for forms that start empty where modification is not a meaningful concept. |

## Slots

| Name | Scoped | Description |
| --- | --- | --- |
| `action-bar` | yes |  |
| `confirm-button` | yes |  |
| `cancel-button` | yes |  |
| `actions-hint` |  |  |
| `validation-summary` | yes | Override the structured per-field validation alert shown when `formContext.state.anyError` is set and at least one field error has no rendered field showing it; receives `entries` (each `{ field, label, messages }`, limited to those errors), `count`, and `title`. |
| `action-form-inner` | yes |  |
| `form-confirm-dialog-warnings` | yes |  |

[Full slot reference](/v3/reference/api/vue/ActionForm/slots.md)

## Source

`client/lib/views/ActionForm.vue`