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

# FormModel

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

> Root model-form wrapper.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/FormModel.md#theme-key-FormModel-root) |  | Root model-form wrapper. |
| [inner](/v3/reference/theming/keys/FormModel.md#theme-key-FormModel-inner) | `flex flex-col` | Vertical stack for generated fields. |
| [label](/v3/reference/theming/keys/FormModel.md#theme-key-FormModel-label) | 2 classes | Optional model-form label above the generated field stack. |
| [beforeFields](/v3/reference/theming/keys/FormModel.md#theme-key-FormModel-beforeFields) |  | Hook before the generated fields. |
| [afterFields](/v3/reference/theming/keys/FormModel.md#theme-key-FormModel-afterFields) |  | Hook after the generated fields. |
| [fields](/v3/reference/theming/keys/FormModel.md#theme-key-FormModel-fields) | `flex w-full flex-col gap-7` | Container for generated field entries. |
| [field](/v3/reference/theming/keys/FormModel.md#theme-key-FormModel-field) |  | Wrapper around each generated field. |
| [fieldInner](/v3/reference/theming/keys/FormModel.md#theme-key-FormModel-fieldInner) |  | Pass-through wrapper immediately inside a generated field. |

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

## root

> Root model-form wrapper.

Source: `client/lib/theme/vueda-tailwind/form/FormModel.theme.js:18`

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

## inner

> Vertical stack for generated fields.

Default classes:

`flex flex-col`

Source: `client/lib/theme/vueda-tailwind/form/FormModel.theme.js:22`

<a id="theme-key-FormModel-label"></a>

## label

> Optional model-form label above the generated field stack.

Default classes:

```text
ml-2 leading-7
text-neutral-900/60 dark:text-white/60
```

Source: `client/lib/theme/vueda-tailwind/form/FormModel.theme.js:26`

<a id="theme-key-FormModel-beforeFields"></a>

## beforeFields

> Hook before the generated fields.

Source: `client/lib/theme/vueda-tailwind/form/FormModel.theme.js:30`

<a id="theme-key-FormModel-afterFields"></a>

## afterFields

> Hook after the generated fields.

Source: `client/lib/theme/vueda-tailwind/form/FormModel.theme.js:34`

<a id="theme-key-FormModel-fields"></a>

## fields

> Container for generated field entries.

Default classes:

`flex w-full flex-col gap-7`

Source: `client/lib/theme/vueda-tailwind/form/FormModel.theme.js:38`

<a id="theme-key-FormModel-field"></a>

## field

> Wrapper around each generated field.

Source: `client/lib/theme/vueda-tailwind/form/FormModel.theme.js:42`

<a id="theme-key-FormModel-fieldInner"></a>

## fieldInner

> Pass-through wrapper immediately inside a generated field.

Source: `client/lib/theme/vueda-tailwind/form/FormModel.theme.js:48`