Skip to content

FormifyInput

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

vue
<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

PropDescription
name (required)Unique name of the input. The form extract data from name attribute.
model-value / v-modelBindig value. Not necessary but you can use it.
labelInput label
defaultDefault value
errorError message
ignoreIgnore input value when extracting data
preserveKeep data when using v-if for conditional rendering

Events

EventDescription
submitSend form data. Data will be automatically extracted.

Slots

SlotParameterDescription
labelCustomize label
errorCustomize error