useField on checkbox

[roman-x]

I'm trying to implement useField with input checkbox on custom component and can't find any example on this topic

parent component:

<Form :validation-schema="schema" @submit="onSubmit">
      <form-checkbox-input
        name="drinks"
        label="Coffee"
        inputValue="coffee"
        id="coffee"
      ></form-checkbox-input>
      <form-checkbox-input
        name="drinks"
        label="Tea"
        inputValue="tea"
        id="tea"
      ></form-checkbox-input>
      <button type="submit">Submit</button>
</Form>

child component:

<script setup>
import { useField } from "vee-validate";

//eslint-disable-next-line no-undef
const props = defineProps({
  name: String,
  label: String,
  inputValue: String,
  id: String,
});

const { value, errorMessage } = useField(props.name, undefined, {
  type: "checkbox",
  checkedValue: props.inputValue,
});
</script>

<template>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" v-model="value" :id="id" />
    <label class="form-check-label" :for="id">
      {{ label }}
    </label>
    <div class="error">
      {{ errorMessage }}
    </div>
  </div>
</template>

in this scenario, the checkboxes are clickable only once in a few clicks and the submit has some strange array that looks like this: [true, "on"]

can someone please tell me what I'm doing wrong and how to use checkboxes with useField?

[logaretm]

Hard to tell without a live demo here. But there is an official example for custom checkboxes