Radio groups validation with composition API?

[JaavierR]

Hi,

Recently I started to work with radio buttons and I need to handle the values via the composition API. So, my approach was to create a custom input component, but when I try to select one of the three options each one is checked, and the previous selection is not unchecked.

In the vue devtools it appears that I have three radio buttons with the same name but each one have his corresponding value, maybe that is the problem. But I have not found a way to make it work, and I could not find any example with the composition api in the documentation or github or the logaretm codesandbox.

Here is a portion of the code and how I'm using it

<script setup>
const props = defineProps({
    value: {
        type: String,
        default: '',
    },
    name: {
        type: String,
        default: '',
    },
})

const { value, handleChange } = useField(props.name, undefined, {
    checkedValue: props.value,
    type: 'radio',
})
</script>

<template>
    <input type="radio" :value="value" @change="handleChange" />
</template>

<template>
  <CustomRadio name='options' value="some_value" />
  <CustomRadio name='options' value="some_value2" />
</template>

Thanks in advance

[PineappleAttack]

Hi,
I think you just need to add modelValue?: null, to the props (The group's value). You can orientate yourself by the checkbox example:
https://vee-validate.logaretm.com/v4/examples/custom-checkboxes
Maybe it could be helpful if you add: const { name, value } = toRefs(props); but I think it should work even without it.
I hope it helps :)

[logaretm]

3 Things I noticed in your sample:

1. Checkboxes and Radio must be contained within a Form or useForm component. Because grouping won't work otherwise.
2. Your are passing value to your input but that is masked by the value grabbed from useField, so there is a conflict there. You need to bind the prop value to the input, not the current field value from useField.
3. You need to grab checked from useField because it computes whether this individual input should be checked or not.

Example here:

https://stackblitz.com/edit/vitejs-vite-exe74t?file=src%2FApp.vue,src%2Fcomponents%2FCustomRadio.vue&terminal=dev