directus/src/components/v-form

Form

Renders a form using interfaces based on the passed collection name.

Usage

<v-form
	collection="articles"
	:edits.sync="{}"
	:initial-values="{
		title: 'Hello World'
	}"
/>

Props

Prop	Description	Default
collection	The collection of which you want to render the fields	--
fields	Array of fields to render. This can be used instead of the collection prop	--
initialValues	Object of the starting values of the fields	--
edits	The edits that were made after the form was rendered. Being used in v-model	--
loading	Display the form in a loading state. Prevents the ctx menus from being used and renders skeleton loaders for the fields	false

Note: You have to pass either the collection or fields prop.

Slots

n/a

Events

Event	Description
input	Edits have been updated.

CSS Variables

Variable	Default
--v-form-column-width	300px
--v-form-row-max-height	calc(var(--v-form-column-width) * 2)
--v-form-horizontal-gap	12px
--v-form-vertical-gap	52px