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:

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.

<Field v-slot="{ field }" name="terms" type="checkbox" :value="false">
    <input type="checkbox" name="terms" v-bind="field" :value="false" />
    I agree

The same caveat applies if you are rendering another component with as prop:

<Field as="my-checkbox" name="terms" type="checkbox" :value="false" />

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.

See the Pen Validating Radio Inputs by Abdelrahman Awad (@logaretm) on CodePen.

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.

See the Pen Validating Checkboxes by Abdelrahman Awad (@logaretm) on CodePen.

If there is only one checkbox then its value will be directly assigned in the values object without binding it in an array.