Form

The <Form> component acts as an enhanced version of the native HTML form. It streamlines form data collection, validation management, and submission handling.

Basic usage

vue

<script lang="ts" setup>
import { useForm } from 'vue-formify';

const { Form, Field, handleSubmit } = useForm();

const sendForm = handleSubmit((data) => {
	console.log(data);
});
</script>

<template>
	<Form @submit="sendForm">
		<Field name="first_name" />
		<Field name="last_name" />
		<button>Send</button>
	</Form>
</template>

Set initial values

You can set initial values either by providing them as an option to the composable or by passing them as a prop to the Form component:

vue

<script lang="ts" setup>
import { useForm } from 'vue-formify';

const { Form, Field, handleSubmit } = useForm({
	initialValues: {
		first_name: 'John',
		last_name: 'Doe'
	}
});
</script>

vue

<template>
	<Form @submit="sendForm" :initial-values="{ first_name: 'John', last_name: 'Doe' }">
		<Field name="first_name" />
		<Field name="last_name" />
		<button>Send</button>
	</Form>
</template>

API reference

Props

Prop name	Description
enctype	Specifies how the form data should be encoded.
initialValues	Sets initial values for form elements.

Note: name, preserve, mode, and schema are configured through the useForm options, not as props on <Form>.

Events

Event	Description
submit	Emits form data, automatically extracting the values.
value-change	Fires when form data changes, useful for triggering side effects.

Slots

Slot	Parameter	Description
default	{ values, getError, getFieldState, isDirty, isValid, isTouched, isSubmitted, submitCount }	Provides access to form data and reactive state.