VvCheckbox Component

The VvButton component generates <input type="checkbox"> (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.

VvCheckbox Defaults

Contributor:@oberocks

                    
                        <!-- ./src/components/MyCheckboxComponent.vue -->

                        <script setup lang="ts">

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

                            const checkValOne = ref(true)
                            const checkValTwo = ref(false)

                            const tw = {
                                checks: 'flex items-center gap-2',
                            }

                        </script>

                        <template>

                            <div class="flex flex-col w-full space-y-2">

                                <div> :class="tw.checks">
                                    <VvCheckbox
                                        id="checkbox-one"
                                        color="primary"
                                        :checked="checkValOne"
                                        v-model="checkValOne"
                                    />
                                    <label for="checkbox-one">
                                        First Checkbox (checkValOne)
                                    </label>
                                </div>

                                <div> :class="tw.checks">
                                    <VvCheckbox
                                        id="checkbox-two"
                                        color="primary"
                                        :checked="checkValTwo"
                                        v-model="checkValTwo"
                                    />
                                    <label for="checkbox-two">
                                        Second Checkbox (checkValTwo)
                                    </label>
                                </div>

                            </div>
                        
                        </template>

The Result:

First Checkbox (checkValOne)

Second Checkbox (checkValTwo)

checkValOne: true

checkValTwo: false