---
url: "https://vueda.dev/v3/reference/theming/keys/ActionForm.md"
title: "ActionForm"
---

# ActionForm

Source: `client/lib/theme/vueda-tailwind/views/index.js`

> Outer wrapper. Caps content at the `7xl` content column so a confirmation form does not stretch the full width of a wide viewport. With `page`, the cap moves to [ActionForm.content](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-content), so the sticky action bar spans the page.

Vue component: [ActionForm](/v3/reference/api/vue/ActionForm.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-root) | callback | Outer wrapper. Caps content at the `7xl` content column so a confirmation form does not stretch the full width of a wide viewport. With `page`, the cap moves to [ActionForm.content](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-content), so the sticky action bar spans the page. |
| [content](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-content) | callback | Wrapper around the error display, the validation summary, and the form. Without `page` it adds no box (`display: contents`). With `page`, it is the page body under the sticky action bar: `px-5 py-5` sets the gutter shared with [ViewRead.body](/v3/reference/theming/keys/ViewRead.md#theme-key-ViewRead-body) and [ViewUpdate.body](/v3/reference/theming/keys/ViewUpdate.md#theme-key-ViewUpdate-body), and `max-w-7xl` caps the content column. |
| [inner](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-inner) | `flex flex-col gap-1 md:gap-2 2xl:gap-4` | Vertical stack for the form body (selected objects, message, fields). Gap scales up at breakpoints to keep section spacing legible on larger viewports. |
| [selectedObjects](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-selectedObjects) |  | Selected-objects panel passthrough when ActionForm renders standalone. When embedded in [ModelActionForm](/v3/reference/theming/keys/ModelActionForm.md), the inner card owns the tinted chip-strip container; this slot stays empty so the parent recipe is authoritative. |
| [message](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-message) |  | Confirm-prompt passthrough when ActionForm renders standalone. The canonical 2 px primary left-rule recipe lives on [ModelActionForm.message](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-message); this slot is intentionally empty for embedded usage. |
| [buttons](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-buttons) | 4 classes | Pinned actions strip closing the card body: horizontal row with a top hairline and a tinted-muted background that picks up the bottom radius via `rounded-b-vueda-card` when nested in [ModelActionForm.card](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-card). Wraps on narrow viewports rather than stacking column. |
| [stickyButtons](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-stickyButtons) | `flex flex-row flex-wrap items-center gap-1 2xl:gap-2 w-full` | Action row used in place of [ActionForm.buttons](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-buttons) when `page` moves the bar into a StickyBar. Wraps like the detail views' action bar and drops the strip's own hairline, tint, and padding, which the StickyBar supplies. |
| [buttonsSpacer](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-buttonsSpacer) | `flex-1 min-w-0` | Flexible filler between the confirm / cancel cluster and the optional hint, keeping the buttons pinned to the start of the strip. |
| [buttonsHint](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-buttonsHint) | 2 classes | Right-aligned actions-hint slot inside the pinned strip, sized for keyboard shortcuts, reversibility notes, or audit hints. Muted-foreground at 12 px so the hint reads as supporting copy beside the action buttons. |
| [list](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-list) | `flex flex-col gap-1 md:gap-2 lg:max-w-max` | Vertical list used when ActionForm is consumed outside the ModelActionForm chip-strip recipe (e.g. plain stacked rows of selected objects). Caps at `max-w-max` on `lg+` so the column hugs its longest row. |
| [listItem](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-listItem) |  | Row entry in the standalone list. Empty by default so the consumer can supply its own row chrome; the chip recipe lives on [ModelActionForm.listItem](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-listItem). |
| [nonFieldErrorBlock](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-nonFieldErrorBlock) |  | Form-scope feedback block above the fields: the non-field error alert, the structured validation alert for field errors no rendered field shows, and the non-field warning alert. Empty by default, so the alerts are spaced by their own vertical margins; consumers can opt into a richer block when they need free-form server errors above the form. |
| [validation](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-validation) | 3 classes | Structured per-field validation alert rendered above the fields when `formContext.state.anyError` is set and at least one field error has no rendered field showing it beside the input. Destructive 6%-mix fill with a destructive-tinted border; tone tracks danger via `data-tone="danger"` on the alert root so future skins can route through `group-data-[tone=danger]/action-form-validation:` variants. |
| [validationIcon](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-validationIcon) | 3 classes | Destructive 36 px icon tile leading the validation alert. Matches the icon-tile recipe used on the [ModelActionForm.bannerIcon](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-bannerIcon) banner so the two destructive surfaces read as siblings. |
| [validationBody](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-validationBody) | `flex flex-col gap-1 min-w-0` | Inner body column inside the validation alert (title, description, bullet list). `min-w-0` lets the bullet list ellipsize a long field message instead of pushing the alert wider. |
| [validationTitle](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-validationTitle) | `text-[14px] font-semibold leading-[1.3] text-foreground` | Validation alert title. 14 px / 600 / foreground; carries the "Fix these to continue" headline copy. |
| [validationDesc](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-validationDesc) | `text-[12px] font-normal leading-[1.5] text-muted-foreground` | One-line description beneath the validation title. 12 px / muted-foreground so the headline / supporting-copy hierarchy reads at a glance. |
| [validationList](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-validationList) | `flex flex-col gap-0.5 m-0 mt-1 p-0 list-none` | Tight unmarked list of per-field errors. Removes the default `<ul>` margin and bullet glyph since the row itself carries the field / message pairing. |
| [validationListItem](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-validationListItem) | `flex items-baseline gap-2 text-[12px] leading-[1.5]` | One row in the validation list: mono field name beside the human-readable message. Baseline-aligned so descenders stay even with the field label. |
| [validationField](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-validationField) | `font-mono text-[11.5px] font-medium text-foreground shrink-0` | Field-name fragment in a validation row. Mono / 11.5 px / 500 / foreground; `shrink-0` keeps the name from wrapping when the message is long. |
| [validationMsg](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-validationMsg) | `text-[12px] font-normal text-muted-foreground` | Human-readable message fragment in a validation row. 12 px / muted-foreground so the field name reads as the primary token and the message as supporting copy. |

<a id="theme-key-ActionForm-root"></a>

## root

> Outer wrapper. Caps content at the `7xl` content column so a confirmation form does not stretch the full width of a wide viewport. With `page`, the cap moves to [ActionForm.content](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-content), so the sticky action bar spans the page.

Callback:

```javascript
({ page }) => (page ? [] : ["max-w-7xl"])
```

Source: `client/lib/theme/vueda-tailwind/views/ActionForm.theme.js:17`

<a id="theme-key-ActionForm-content"></a>

## content

> Wrapper around the error display, the validation summary, and the form. Without `page` it adds no box (`display: contents`). With `page`, it is the page body under the sticky action bar: `px-5 py-5` sets the gutter shared with [ViewRead.body](/v3/reference/theming/keys/ViewRead.md#theme-key-ViewRead-body) and [ViewUpdate.body](/v3/reference/theming/keys/ViewUpdate.md#theme-key-ViewUpdate-body), and `max-w-7xl` caps the content column.

Callback:

```javascript
({ page }) => (page ? ["px-5 py-5 max-w-7xl"] : ["contents"])
```

Source: `client/lib/theme/vueda-tailwind/views/ActionForm.theme.js:21`

<a id="theme-key-ActionForm-inner"></a>

## inner

> Vertical stack for the form body (selected objects, message, fields). Gap scales up at breakpoints to keep section spacing legible on larger viewports.

Default classes:

`flex flex-col gap-1 md:gap-2 2xl:gap-4`

Source: `client/lib/theme/vueda-tailwind/views/ActionForm.theme.js:25`

<a id="theme-key-ActionForm-selectedObjects"></a>

## selectedObjects

> Selected-objects panel passthrough when ActionForm renders standalone. When embedded in [ModelActionForm](/v3/reference/theming/keys/ModelActionForm.md), the inner card owns the tinted chip-strip container; this slot stays empty so the parent recipe is authoritative.

Source: `client/lib/theme/vueda-tailwind/views/ActionForm.theme.js:29`

<a id="theme-key-ActionForm-message"></a>

## message

> Confirm-prompt passthrough when ActionForm renders standalone. The canonical 2 px primary left-rule recipe lives on [ModelActionForm.message](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-message); this slot is intentionally empty for embedded usage.

Source: `client/lib/theme/vueda-tailwind/views/ActionForm.theme.js:33`

<a id="theme-key-ActionForm-buttons"></a>

## buttons

> Pinned actions strip closing the card body: horizontal row with a top hairline and a tinted-muted background that picks up the bottom radius via `rounded-b-vueda-card` when nested in [ModelActionForm.card](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-card). Wraps on narrow viewports rather than stacking column.

Default classes:

```text
flex flex-row flex-wrap items-center gap-2
px-4 py-3 mt-2
border-t-hairline bg-muted/25
rounded-b-vueda-card
```

Source: `client/lib/theme/vueda-tailwind/views/ActionForm.theme.js:37`

<a id="theme-key-ActionForm-stickyButtons"></a>

## stickyButtons

> Action row used in place of [ActionForm.buttons](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-buttons) when `page` moves the bar into a StickyBar. Wraps like the detail views' action bar and drops the strip's own hairline, tint, and padding, which the StickyBar supplies.

Default classes:

`flex flex-row flex-wrap items-center gap-1 2xl:gap-2 w-full`

Source: `client/lib/theme/vueda-tailwind/views/ActionForm.theme.js:46`

<a id="theme-key-ActionForm-buttonsSpacer"></a>

## buttonsSpacer

> Flexible filler between the confirm / cancel cluster and the optional hint, keeping the buttons pinned to the start of the strip.

Default classes:

`flex-1 min-w-0`

Source: `client/lib/theme/vueda-tailwind/views/ActionForm.theme.js:50`

<a id="theme-key-ActionForm-buttonsHint"></a>

## buttonsHint

> Right-aligned actions-hint slot inside the pinned strip, sized for keyboard shortcuts, reversibility notes, or audit hints. Muted-foreground at 12 px so the hint reads as supporting copy beside the action buttons.

Default classes:

```text
ml-auto text-[12px] leading-none text-muted-foreground
inline-flex items-center gap-1.5
```

Source: `client/lib/theme/vueda-tailwind/views/ActionForm.theme.js:54`

<a id="theme-key-ActionForm-list"></a>

## list

> Vertical list used when ActionForm is consumed outside the ModelActionForm chip-strip recipe (e.g. plain stacked rows of selected objects). Caps at `max-w-max` on `lg+` so the column hugs its longest row.

Default classes:

`flex flex-col gap-1 md:gap-2 lg:max-w-max`

Source: `client/lib/theme/vueda-tailwind/views/ActionForm.theme.js:58`

<a id="theme-key-ActionForm-listItem"></a>

## listItem

> Row entry in the standalone list. Empty by default so the consumer can supply its own row chrome; the chip recipe lives on [ModelActionForm.listItem](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-listItem).

Source: `client/lib/theme/vueda-tailwind/views/ActionForm.theme.js:62`

<a id="theme-key-ActionForm-nonFieldErrorBlock"></a>

## nonFieldErrorBlock

> Form-scope feedback block above the fields: the non-field error alert, the structured validation alert for field errors no rendered field shows, and the non-field warning alert. Empty by default, so the alerts are spaced by their own vertical margins; consumers can opt into a richer block when they need free-form server errors above the form.

Default classes:

Source: `client/lib/theme/vueda-tailwind/views/ActionForm.theme.js:66`

<a id="theme-key-ActionForm-validation"></a>

## validation

> Structured per-field validation alert rendered above the fields when `formContext.state.anyError` is set and at least one field error has no rendered field showing it beside the input. Destructive 6%-mix fill with a destructive-tinted border; tone tracks danger via `data-tone="danger"` on the alert root so future skins can route through `group-data-[tone=danger]/action-form-validation:` variants.

Default classes:

```text
flex items-start gap-3 p-3 my-2
rounded-vueda-card hairline [--vueda-hairline-color:color-mix(in_oklab,var(--destructive)_40%,transparent)]
bg-[color-mix(in_oklab,var(--destructive)_6%,transparent)]
```

Source: `client/lib/theme/vueda-tailwind/views/ActionForm.theme.js:70`

<a id="theme-key-ActionForm-validationIcon"></a>

## validationIcon

> Destructive 36 px icon tile leading the validation alert. Matches the icon-tile recipe used on the [ModelActionForm.bannerIcon](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-bannerIcon) banner so the two destructive surfaces read as siblings.

Default classes:

```text
flex items-center justify-center shrink-0
w-9 h-9 rounded-full bg-destructive text-destructive-foreground
text-[18px] leading-none
```

Source: `client/lib/theme/vueda-tailwind/views/ActionForm.theme.js:78`

<a id="theme-key-ActionForm-validationBody"></a>

## validationBody

> Inner body column inside the validation alert (title, description, bullet list). `min-w-0` lets the bullet list ellipsize a long field message instead of pushing the alert wider.

Default classes:

`flex flex-col gap-1 min-w-0`

Source: `client/lib/theme/vueda-tailwind/views/ActionForm.theme.js:86`

<a id="theme-key-ActionForm-validationTitle"></a>

## validationTitle

> Validation alert title. 14 px / 600 / foreground; carries the "Fix these to continue" headline copy.

Default classes:

`text-[14px] font-semibold leading-[1.3] text-foreground`

Source: `client/lib/theme/vueda-tailwind/views/ActionForm.theme.js:90`

<a id="theme-key-ActionForm-validationDesc"></a>

## validationDesc

> One-line description beneath the validation title. 12 px / muted-foreground so the headline / supporting-copy hierarchy reads at a glance.

Default classes:

`text-[12px] font-normal leading-[1.5] text-muted-foreground`

Source: `client/lib/theme/vueda-tailwind/views/ActionForm.theme.js:94`

<a id="theme-key-ActionForm-validationList"></a>

## validationList

> Tight unmarked list of per-field errors. Removes the default `<ul>` margin and bullet glyph since the row itself carries the field / message pairing.

Default classes:

`flex flex-col gap-0.5 m-0 mt-1 p-0 list-none`

Source: `client/lib/theme/vueda-tailwind/views/ActionForm.theme.js:98`

<a id="theme-key-ActionForm-validationListItem"></a>

## validationListItem

> One row in the validation list: mono field name beside the human-readable message. Baseline-aligned so descenders stay even with the field label.

Default classes:

`flex items-baseline gap-2 text-[12px] leading-[1.5]`

Source: `client/lib/theme/vueda-tailwind/views/ActionForm.theme.js:102`

<a id="theme-key-ActionForm-validationField"></a>

## validationField

> Field-name fragment in a validation row. Mono / 11.5 px / 500 / foreground; `shrink-0` keeps the name from wrapping when the message is long.

Default classes:

`font-mono text-[11.5px] font-medium text-foreground shrink-0`

Source: `client/lib/theme/vueda-tailwind/views/ActionForm.theme.js:106`

<a id="theme-key-ActionForm-validationMsg"></a>

## validationMsg

> Human-readable message fragment in a validation row. 12 px / muted-foreground so the field name reads as the primary token and the message as supporting copy.

Default classes:

`text-[12px] font-normal text-muted-foreground`

Source: `client/lib/theme/vueda-tailwind/views/ActionForm.theme.js:110`