Checkbox

CCheckbox is an extension to standard checkbox element with theming.

Basic Usage

Binary checkbox is used with the v-model for two-way value binding and the binary property.

<template>
  <CCheckbox 
      v-model="checked" 
      binary 
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const checked = ref(false);
</script>

Group

Multiple checkboxes can be grouped together. The v-model value should be an array to store the values of the checked checkboxes.

Each checkbox must have a unique value property.

Cheese

Mushroom

Pepper

Onion

Selected Values: []

<template>
    <div class="card flex flex-wrap justify-center gap-4">
        <div class="flex items-center gap-2">
            <CCheckbox 
                v-model="pizza" 
                inputId="ingredient1" 
                name="pizza" 
                value="Cheese" 
            />
            <label for="ingredient1"> Cheese </label>
        </div>
        <div class="flex items-center gap-2">
            <CCheckbox 
                v-model="pizza" 
                inputId="ingredient2" 
                name="pizza" 
                value="Mushroom" 
            />
            <label for="ingredient2"> Mushroom </label>
        </div>
        <div class="flex items-center gap-2">
            <CCheckbox 
                v-model="pizza" 
                inputId="ingredient3" 
                name="pizza" 
                value="Pepper" 
            />
            <label for="ingredient3"> Pepper </label>
        </div>
        <div class="flex items-center gap-2">
            <CCheckbox 
                v-model="pizza" 
                inputId="ingredient4" 
                name="pizza" 
                value="Onion" 
            />
            <label for="ingredient4"> Onion </label>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const pizza = ref<string[]>([]);
</script>

Sizes

CCheckbox provides small and large sizes as alternatives to the base.

Small

Normal

Large

<template>
    <div class="card flex flex-wrap justify-center gap-4">
        <div class="flex items-center gap-2">
            <CCheckbox 
                v-model="size" 
                inputId="size_small" 
                value="Small" 
                size="small" 
            />
            <label for="size_small" class="text-sm">Small</label>
        </div>
        <div class="flex items-center gap-2">
            <CCheckbox 
                v-model="size" 
                inputId="size_normal" 
                value="Normal" 
            />
            <label for="size_normal">Normal</label>
        </div>
        <div class="flex items-center gap-2">
            <CCheckbox 
                v-model="size" 
                inputId="size_large" 
                value="Large" 
                size="large" 
            />
            <label for="size_large" class="text-lg">Large</label>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const size = ref(null);
</script>

Invalid

Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.

<template>
  <CCheckbox 
      v-model="checked" 
      :invalid="!checked" 
      binary 
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const checked = ref(false);
</script>

Filled

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.

<template>
  <CCheckbox 
      v-model="checked" 
      binary 
      variant="filled" 
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const checked = ref(false);
</script>

Disabled

When disabled is present, the element cannot be edited and focused.

<template>
    <div class="card flex justify-center gap-2">
        <CCheckbox v-model="checked1" binary disabled />
        <CCheckbox v-model="checked2" binary disabled />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const checked1 = ref(false);
const checked2 = ref(true);
</script>