Basic Usage

Agree to agreement

<script setup>
import { ref } from 'vue'
const val = ref(false)
</script>

<template>
  <c-checkbox
    v-model="val"
    label="Agree to agreement"
  />
</template>

Click to open/fold code

Open Vue Repl Editor

Sizes

xs

sm

md (default)

lg

xl

Current value: md

<script setup>
import { ref } from 'vue'
const val = ref('md')
</script>

<template>
  <div class="c-row c-gutter-md c-items-center">
    <c-checkbox
      v-model="val"
      checked-value="xs"
      size="xs"
      label="xs"
    />
    <c-checkbox
      v-model="val"
      checked-value="sm"
      size="sm"
      label="sm"
    />
    <c-checkbox
      v-model="val"
      checked-value="md"
      label="md (default)"
    />
    <c-checkbox
      v-model="val"
      checked-value="lg"
      size="lg"
      label="lg"
    />
    <c-checkbox
      v-model="val"
      checked-value="xl"
      size="xl"
      label="xl"
    />
  </div>
  <div>Current value: {{ val }}</div>
</template>

Click to open/fold code

Open Vue Repl Editor

Disabled

Disabled

Disabled

<script setup>
import { ref } from 'vue'
const val1 = ref(false)
const val2 = ref(true)
</script>

<template>
  <c-checkbox
    v-model="val1"
    label="Disabled"
    disabled
  />
  <c-checkbox
    v-model="val2"
    label="Disabled"
    disabled
    class="c-ml-md"
  />
</template>

Click to open/fold code

Open Vue Repl Editor

CheckboxGroup

Apple

Banana

Orange

Peach

Current value: []

<script setup>
import { ref } from 'vue'

const val = ref([])

const options = [
  { label: 'Apple', value: 'Apple' },
  { label: 'Banana', value: 'Banana' },
  { label: 'Orange', value: 'Orange' },
  { label: 'Peach', value: 'Peach' },
]
</script>

<template>
  <c-checkbox-group
    v-model="val"
    :options="options"
    class="c-row c-item-center c-gutter-x-md"
  />
  <div>Current value: {{ val }}</div>
</template>

Click to open/fold code

Open Vue Repl Editor

CCheckbox API

Props

Events

modelValue

CCheckboxModel

*

Checked status. Can be used with v-model.

theme

CTheme

Default  'primary'

The theme color

size

CSize

Default  'md'

The size of checkbox.

label

string

Default  ''

The label text.

checkedValue

CCheckboxModel

Default  true

The value used for checked status.

disabled

boolean

Default  false

Determine whether the checkbox is disabled or not.

CCheckboxGroup API

Props

Events

options

Array<{ label: string; value: CCheckboxModel }>

Default  () => []

The options array.

modelValue

Array<CCheckboxModel>

*

The value of current checked values. Can be used with v-model.

size

CSize

Default  'md'

The size

gutterSize

CSize

Default  'md'

The gutter size between each checkbox.