Checkbox and Radio Inputs
The documentation has so far avoided using type="radio" and type="checkbox" inputs because of their complex nature, however vee-validate supports both HTML checkboxes and radio inputs as well as your custom components that act as such (with caveats).
The only requirements are that the fields:
- Must be inside a
Formcomponent or a derivative (using useForm) - Must Have the same
nameprop - Should have a
typeattribute
Slot props and custom components
When using Field slot props with checkbox/radio components, you still need to provide the type and value props to the Field node itself.
vue<Field v-slot="{ field }" name="terms" type="checkbox" :value="true" :unchecked-value="false">
<label>
<input type="checkbox" name="terms" v-bind="field" :value="true" />
I agree
</label>
</Field>The same caveat applies if you are rendering another component with as prop:
vue<Field as="my-checkbox" name="terms" type="checkbox" :value="true" />Validating Radio Inputs
vee-validate handles radio input groups as long as they have the type="radio" and the same name prop value. The selected value will be present in the values object.
Validating Checkbox Inputs
vee-validate handles checkboxes as long as they have the type="checkbox" prop and the same name prop value. The selected values will be collected in an array similar to what v-model does.
If there is only one checkbox then its value will be directly assigned in the values object without binding it in an array.