VvRadio Component

The VvButton component generates <input type="radio"> (input HTML tag) application elements, and comes with aesthetically flexible Vue props to globally control your instances and defaults via your application's app.vv.ts file.

VvRadio Defaults

Contributor:@oberocks 
                    
                        <!-- ./src/components/MyRadioComponent.vue -->

                        <script setup lang="ts">

                            import { ref } from 'vue'
                            import VvRadio from './vv/inputs/VvRadio.vue'

                            const selections = ref([
                                { value: 'one', label: 'Radio One' },
                                { value: 'two', label: 'Radio Two' },
                                { value: 'three', label: 'Radio Three' },
                            ])

                            const selected = ref(selections.value[0])

                        </script>

                        <template>

                            <div class="flex flex-col space-y-1">

                                <div
                                    v-for="(selection, id) in selections"
                                    class="flex items-center gap-2"
                                    :key="id"
                                >

                                    <VvRadio
                                        :id="'radio-choice-' + id"
                                        name="radio-choices"
                                        :value="selection.value"
                                        color="primary"
                                        @update:modelValue="(event) => event === true ? selected = selection : null"
                                        :checked="selection === selected"
                                    />

                                </div>

                            </div>
                        
                        </template>
The Result:
selected value: one