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

# FormModel

## Overview

This component is a form model that renders fields based on the configuration for the model.

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

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <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-app">app</span> | `string` | yes |  | Django app label that owns the model. |
| <span id="prop-model">model</span> | `string` | yes |  | Django model name to render a form for. |
| <span id="prop-view">view</span> | `string` |  | `undefined` | View identifier used to select view-specific form configuration; uses the default configuration when omitted. |
| <span id="prop-fields">fields</span> | `array` |  | `undefined` | Field names to render; overrides the configuration default for this view. |
| <span id="prop-expand">expand</span> | `array` |  | `undefined` | Field names to render in expanded (inline) mode. |
| <span id="prop-computedFields">computedFields</span> | `array` |  | `undefined` | Field names to render as computed fields: read-only, in `FormField`, and outside the form context. Replaces the model config `computedFields` list for this form. |
| <span id="prop-variant">variant</span> | `string` |  | `"default"` | Visual variant for the theme system. A function-form `FormModel` theme entry receives it as `{ variant }`, so a project can register an alternate form style for each variant. |
| <span id="prop-fieldComponents">fieldComponents</span> | `object` |  | `undefined` | Map of field paths to async functions returning an override field component. |
| <span id="prop-fieldProps">fieldProps</span> | `object` |  | `undefined` | Map of field paths to additional props passed to the field component. |
| <span id="prop-fieldDetails">fieldDetails</span> | `object` |  | `undefined` | Map of field paths to field detail overrides merged with server configuration. |
| <span id="prop-expandDetails">expandDetails</span> | `object` |  | `undefined` | Map of expand field paths to detail overrides. |
| <span id="prop-widgetComponents">widgetComponents</span> | `object` |  | `undefined` | Map of field paths to async functions returning an override widget component. |
| <span id="prop-widgetProps">widgetProps</span> | `object` |  | `undefined` | Map of field paths to additional props passed to the widget component. |

## Slots

| Name | Scoped | Description |
| --- | --- | --- |
| `before-fields` | yes |  |
| `form-level-chores` |  |  |
| `fields` | yes | fields Replace the default field loop. Render each field with FormModelField so the per-field slots reach it. |
| `after-fields` | yes |  |

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

## Source

`client/lib/form/form-model/FormModel.vue`