FormifyInput

The <FormifyInput /> component is a basic HTML input field with label and error message.

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

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

</script>
<template>
	<FormifyForm @submit="sendForm">
		<FormifyInput name="email" />
		<button>Send</button>
	</FormifyForm>
</template>

Api reference

Props

Prop	Description
name (required)	Unique name of the input. The form extract data from name attribute.
model-value / v-model	Bindig value. Not necessary but you can use it.
label	Input label
default	Default value
error	Error message
ignore	Ignore input value when extracting data
preserve	Keep data when using v-if for conditional rendering

Events

Event	Description
submit	Send form data. Data will be automatically extracted.

Slots

Slot	Parameter	Description
label		Customize label
error		Customize error