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:

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.