VvCheckbox Component

The VvCheckbox Component provides a set of props and config module based settings to make a validation ready set of checkbox input elements for applications with an extremely DRY implementation of atomic classes.

Import

To import a VvCheckbox Component installed by the vueventus CLI or vv-update CLI:

// ./src/components/SomeComponent.vue
import VvCheckbox from './vv/inputs/VvCheckbox.vue'

TIP

CLI installed components pass through VueVentus defaults via component props. Each prop default value can be customized globally by overriding VvConfig defaults in your app ./src/app.vv.ts file or singularly in a component instance.

Alternatively, you can install the raw library VvCheckbox Component with:

import { VvCheckbox } from '@obewds/vueventus'

TIP

Importing raw VueVentus library components will still apply your ./src/app.vv.ts settings automatically through the Vue provide() and inject() pattern. All raw VueVentus library components automatically check for a provided "vv" keyed object with a ConfigVv type interface.

CLI or Raw?

The main difference between raw library components and CLI installed components, is that you have no control over component defaults with raw library components. This is less flexible than using CLI installed components, because control of component defaults can greatly reduce the number of props a dev has to type for component instances, which reduces app code.

Meanwhile, the control CLI installed components provide through customizable defaults, opens up to a global level (styling management system) control for default component state characteristic values (particularly powerful with color and proportional size characteristics).

Emits: update:modelValue

Emits: update:modelValue
Emit Value Type: Boolean

The VvCheckbox Component emits a standard Vue key of update:modelValue upon the change event of the component's generated checkbox input's checked attribute.

TIP

This means when using the VvCheckbox Component downstream in an end application, you can safely use Vue's v-model binding to two-way bind a reactive value through your downstream component and into (and back from) the VvCheckbox Component instance.

Example

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

<script setup lang="ts">

    import { ref } from 'vue'
    import { VvCheckbox } from '@obewds/vueventus'

    const isCheckedDefaultValue = ref(false)

</script>

<template>

    <VvCheckbox v-model="isCheckedDefaultValue"/>

</template>

Prop: checked

Type: Boolean
Default: "false"

The VvCheckbox Component checked prop sets the component instance checked attribute. This means when the component is initialized with the checked prop being true, then the rendered checkbox will display in the fully checked state.

Syntax

<div class="flex gap-3">
    <VvCheckbox/>
    <VvCheckbox :checked="true"/>
</div>

Result

Prop: color

Type: String
Default: "default"

The VvCheckbox Component color prop sets the component instance color based both on the color prop and the palette prop value.

Syntax

<div class="flex gap-3">
    <VvCheckbox color="default" :checked="true"/>
    <VvCheckbox color="error" :checked="true"/>
    <VvCheckbox color="primary" :checked="true"/>
    <VvCheckbox color="secondary" :checked="true"/>
    <VvCheckbox color="success" :checked="true"/>
</div>

Result

Typing for Downstream Component Instances

Coming Soon!

Prop: darkCheckHex

Type: String
Default: "#242426"

The VvCheckbox Component darkCheckHex prop sets the component checked state's check icon color in the dark color mode state.

Syntax

<VvCheckbox
    dark-check-hex="#00ffff"
    light-check-hex="#00ffff"
    checked
/>

Result

Prop: debug

Type: Boolean
Default: false

The VvCheckbox Component debug prop toggles the debugging state of a component instance. When in debugging mode, each component instance prop value can be viewed through data-vv-checkbox- prefixed HTML attributes.

Syntax

<VvCheckbox :debug="true"/>

Result

Prop: lightCheckHex

Type: String
Default: "#e1e1e3"

The VvCheckbox Component lightCheckHex prop sets the component checked state's check icon color in the light color mode state.

Syntax

<VvCheckbox
    light-check-hex="#00ffff"
    dark-check-hex="#00ffff"
    checked
/>

Result

Prop: palette

Type: String
Default: "default"

The VvCheckbox Component palette prop sets the component instance palette based both on the color prop and the palette prop value.

Syntax

<div class="flex gap-3">
    <VvCheckbox palette="default" :checked="true"/>
    <VvCheckbox palette="default" color="error" :checked="true"/>
    <VvCheckbox palette="default" color="primary" :checked="true"/>
    <VvCheckbox palette="default" color="secondary" :checked="true"/>
    <VvCheckbox palette="default" color="success" :checked="true"/>
</div>

Result

Typing for Downstream Component Instances

Coming Soon!

Prop: size

Type: String
Default: "md"

The VvCheckbox Component size prop sets the component instance size-based classes which in the context of checkbox inputs typically involves fixed width and height atomic classes.

Syntax

<div class="flex items-center gap-3">
    <VvCheckbox size="xs" :checked="true"/>
    <VvCheckbox size="sm" :checked="true"/>
    <VvCheckbox size="md" :checked="true"/>
    <VvCheckbox size="lg" :checked="true"/>
    <VvCheckbox size="xl" :checked="true"/>
    <VvCheckbox size="2xl" :checked="true"/>
</div>

Result

size prop checkboxes with sized labels examples

Syntax

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

    <div class="flex items-center gap-1">
        <VvCheckbox id="vvCheck-xs" size="xs" :checked="true"/>
        <label htmlFor="vvCheck-xs" class="text-2xs">XS Size</label>
    </div>

    <div class="flex items-center gap-1.5">
        <VvCheckbox id="vvCheck-sm" size="sm" :checked="true"/>
        <label htmlFor="vvCheck-sm" class="text-xs">SM Size</label>
    </div>

    <div class="flex items-center gap-2">
        <VvCheckbox id="vvCheck-md" size="md" :checked="true"/>
        <label htmlFor="vvCheck-md" class="text-md">MD Size</label>
    </div>

    <div class="flex items-center gap-2.5">
        <VvCheckbox id="vvCheck-lg" size="lg" :checked="true"/>
        <label htmlFor="vvCheck-lg" class="text-lg">LG Size</label>
    </div>

    <div class="flex items-center gap-3">
        <VvCheckbox id="vvCheck-xl" size="xl" :checked="true"/>
        <label htmlFor="vvCheck-xl" class="text-xl">XL Size</label>
    </div>

    <div class="flex items-center gap-3">
        <VvCheckbox id="vvCheck-2xl" size="2xl" :checked="true"/>
        <label htmlFor="vvCheck-2xl" class="text-2xl">2XL Size</label>
    </div>

</div>

Result

XS Size

SM Size

MD Size

LG Size

XL Size

2XL Size

Typing for Downstream Component Instances

Coming Soon!

Slot: None

NO SLOT AVAILABLE

The VvCheckbox Component does not have Vue slot option, because an <input> element is a HTML Empty Element, which cannot have children or child nodes.

Use with Labels

In most application contexts, you'll want to use the VvCheckbox Component with label text and the inherent functionality between associated label and input elements. Here's a few examples to illustrate one of endless ways this can be accomplished within an atomic class and VueVentus context:

Syntax

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

    <div class="flex items-center gap-2">
        <VvCheckbox id="option-one" color="primary" :checked="true"/>
        <label for="option-one">The First Option</label>
    </div>

    <div class="flex items-center gap-2">
        <VvCheckbox id="option-two" color="primary"/>
        <label for="option-two">The Second Option</label>
    </div>

</div>

Result

The First Option

The Second Option

Current Version:

v0.61.7