Unable to set a default value on a checkbox field about vee-validate HOT 3 CLOSED

false is a valid value to yup's .required so it won't make sure the user has checked the box.

instead try oneOf

yup.boolean().oneOf([true], 'Field must be checked')

from vee-validate.

I spotted a few issues in your snippets.

You should use either useField or Field component, not both.

You should also pass the type to the useField options.

const { value, errorMessage, checked } = useField(() => props.name, undefined, {
  type: 'checkbox'
  uncheckedValue: false,
  checkedValue: true
});

What is left is to bind it with a input element instead of the Field component and you can use v-model then or use the checked property. It is up to you how to hook it up.

Now for setting the initial value, you can either pass it to useField options, which would make sense if you want to set it via a prop. Alternatively you can set it on the form level.

useField(() => props.name, undefined, {
  // ...
  initialValue: true
});

// OR
useForm({
  initialValues: { checkboxField: true }
});

You can also use resetForm to toggle the checkbox initial value there, please check the docs in that area.

from vee-validate.

Thanks @logaretm.

I have updated this to the below and can see that the checked property is updating according to the initial value passed in via props. However the yup schema validation on the parent component isn't seeing that

<script setup>

import { useField } from 'vee-validate';

const props = defineProps({
	class: {
		type: String,
		default: '',
	},
	name: {
		type: String,
		required: true,
	},
	intro: {
		type: String,
		required: false,
	},
	initialValue: {
		type: Boolean,
		default: false,
	},
});

const { value, errorMessage, checked, handleChange } = useField(
	() => props.name,
	undefined,
	{
		type: 'checkbox',
		uncheckedValue: false,
		checkedValue: true,
		initialValue: props.initialValue,
	}
);

</script>

<template>
	<div class="mb-6 md:max-w-[530px]">
		<label :for="name" class="o-label">
			<span class="o-instructions" v-if="intro">{{ intro }}</span>
			<div class="flex">
				<input
					type="checkbox"
					:name="name"
					:id="name"
					:value="value"
					:checked="checked"
					@change="handleChange"
					class="sr-only o-checkbox" />
				<span class="o-checkbox__box"></span>
				<div class="ml-3 o-label__text">
					<slot></slot>
				</div>
			</div>
		</label>

		<p class="o-error" v-if="errorMessage">
			{{ errorMessage }}
		</p>
	</div>
</template>

That's using

const currentSchema = const schema = [
  yup.object({
    copyrightOwnershipConfirmed: yup.boolean().required('Please check the box to confirm ownership of copyright.'),
  })
];

const { values, handleSubmit, resetForm } = useForm({
	validationSchema: currentSchema,
	keepValuesOnUnmount: true
});

And including the checkbox component above:

<Checkbox
  name="copyrightOwnershipConfirmed"
  :initial-value="false">
    <span>Label text here</span>
</Checkbox>

I've tried using v-model to bind copyrightOwnershipConfirmed on the component and have also added a watch to try and force the model value but I can't get the yup validator to pick up that this field isn't checked.

from vee-validate.