Skip to content

FormifyRadio

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

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

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

</script>
<template>
	<FormifyForm @submit="sendForm">
		<FormifyRadio name="radio" value="foo" label="Foo" />
		<FormifyRadio name="radio" value="bar" label="Bar" />
		<button>Send</button>
	</FormifyForm>
</template>

You can easily create custom radio with css:

vue
<template>
    <FormifyRadio name="radio" value="foo" label="Foo" class="custom-radio" />
</template>

<style lang="scss" scoped>
.custom-radio {
	display: none;

	+label {
		display: flex;
		align-items: center;
		position: relative;
		padding-left: 25px;
		cursor: pointer;

		&::before {
			content: '';
			position: absolute;
			left: 0;
			width: 20px;
			height: 20px;
			border: 2px solid #fff;
			border-radius: 4px;
			background-color: #fff;
		}
	}

	&:checked {
		+label {
			&::before {
				background-color: #42b883;
				border-color: #fff;
			}
		}
	}
}
</style>

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
label{ label: string }Customize label
error{ error: string }Customize error