Field

The <Field /> component is a flexible component. You can render input fields or wrap custom components with it.

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

const sendForm = (data) => {
	console.log(data);
};

</script>
<template>
	<FormifyForm @submit="sendForm">
		<Field name="first_name" />
		<button>Send</button>
	</FormifyForm>
</template>

You can also wrap your custom input between Field component:

<template>
    <FormifyForm @submit="sendForm">
        <Field name="first_name" v-slot="{field, error}">
            <label>Firstname</label>
            <input v-bind="field"  />
            <small>{{ error }}</small>
        </Field>
    </FormifyForm>
</template>

Api reference

Props

Prop	Description
name	Field name
default	Field default value
ignore	Ignore field when extract data
as	Render field as input or select

Slots

Slot	Parameter	Description
default	{ field, errors }	Gives back the field data and errors.