Checkbox

Display a checkbox & label.

Usage

Use a v-model to make the Checkbox reactive.

      <script setup>
const selected = ref(true)
</script>

<template>
  <CCheckbox
    v-model="selected"
    label="Example checkbox"
  />
</template>

    

Label

      <template>
  <CCheckbox label="Example checkbox" />
</template>

    

Required

      <template>
  <CCheckbox required label="Example checkbox" />
</template>

    

Disabled

      <template>
  <CCheckbox disabled label="Example checkbox" />
</template>

    

Slots

label

Use the #label slot to override the content of the label.

      <template>
  <CCheckbox>
  <template #label>
    Example label slot
  </template>
</CCheckbox>
</template>

    

Props

Prop Default Type
id string
modelValue string | number | false | true
value string | number | false | true
label string
disabledboolean
description string
requiredboolean
errors string[]