Vue Checkbox Components

Checkbox

Create consistent cross-browser and cross-device checkboxes with our Vue checkbox components.

Available in Other JavaScript Frameworks

CoreUI Vue Checkbox Components is also available for Angular, Bootstrap, and React. Explore framework-specific implementations below:

On this page

Approach

<CCheckbox> renders the <input type="checkbox">. That is the whole control — no wrapper, no extra element. Checkboxes are for selecting one or several options in a list; for one option out of many, reach for a radio.

The label property renders a sibling <label> already wired to the input with for, so the label can be styled from the input’s state (:checked, :disabled). Wrap the pair in <CFormField> when you want the label, a description and validation feedback laid out for you.

The check and indeterminate marks are drawn with a CSS mask on the input’s own ::before, which is why their color is a token (--cui-check-mark-color) rather than a value baked into an SVG.

Basic checkbox

vue

<template>
  <CFormField>
    <CCheckbox id="checkDefault" label="Default checkbox" />
  </CFormField>
  <CFormField>
    <CCheckbox id="checkChecked" label="Checked checkbox" checked />
  </CFormField>
</template>

<script setup>
import { CCheckbox, CFormField } from '@coreui/vue'
</script>

Indeterminate

Checkboxes can use the :indeterminate pseudo-class when it is set from JavaScript — there is no HTML attribute for it, so <CCheckbox> sets it through the indeterminate property.

vue

<template>
  <CFormField>
    <CCheckbox id="checkIndeterminate" label="Indeterminate checkbox" indeterminate />
  </CFormField>
</template>

<script setup>
import { CCheckbox, CFormField } from '@coreui/vue'
</script>

Disabled

Add the disabled attribute; the associated <label> is styled to match, in a lighter color, to indicate the state.

vue

<template>
  <CFormField>
    <CCheckbox id="checkDisabled" label="Disabled checkbox" disabled />
  </CFormField>
  <CFormField>
    <CCheckbox id="checkCheckedDisabled" label="Disabled checked checkbox" checked disabled />
  </CFormField>
</template>

<script setup>
import { CCheckbox, CFormField } from '@coreui/vue'
</script>

Stacked

Any number of checkboxes that are immediate siblings stack vertically and are spaced by their <CFormField> wrappers.

vue

<template>
  <CFormField>
    <CCheckbox id="defaultCheck1" label="Default checkbox" />
  </CFormField>
  <CFormField>
    <CCheckbox id="defaultCheck2" label="Disabled checkbox" disabled />
  </CFormField>
</template>

<script setup>
import { CCheckbox, CFormField } from '@coreui/vue'
</script>

Inline

There is no inline property: the control is an inline element, so a row is a flex container with a gap.

vue

<template>
  <div class="d-flex gap-4">
    <CFormField>
      <CCheckbox id="inlineCheckbox1" value="option1" label="1" />
    </CFormField>
    <CFormField>
      <CCheckbox id="inlineCheckbox2" value="option2" label="2" />
    </CFormField>
    <CFormField>
      <CCheckbox id="inlineCheckbox3" value="option3" label="3 (disabled)" disabled />
    </CFormField>
  </div>
</template>

<script setup>
import { CCheckbox, CFormField } from '@coreui/vue'
</script>

Sizing

size="sm" and size="lg" size the whole row — the box, its label, and the space they sit in. Each sets one font size: the box is 1em, so it follows, and so does the alignment margin, which is computed from the line. Nothing needs re-tuning per size, and a size of your own is one custom property.

vue

<template>
  <div class="d-flex align-items-start gap-4">
    <CFormField>
      <CCheckbox id="checkSm" size="sm" label="Small" checked />
    </CFormField>
    <CFormField>
      <CCheckbox id="checkMd" label="Default" checked />
    </CFormField>
    <CFormField>
      <CCheckbox id="checkLg" size="lg" label="Large" checked />
    </CFormField>
  </div>
</template>

<script setup>
import { CCheckbox, CFormField } from '@coreui/vue'
</script>

Any other size is one custom property, and the alignment follows it:

<CCheckbox :style="{ '--cui-check-size': '2em' }" aria-label="..." />

Without a label

A checkbox with no label text is the input on its own. Give it an accessible name some other way — aria-label, for instance. The name says what the checkbox does, like aria-label="Select all rows", and replaces the ... placeholder in the example below. See the forms overview for details.

vue

<template>
  <CCheckbox id="checkboxNoLabel" value="" aria-label="..." />
</template>

<script setup>
import { CCheckbox } from '@coreui/vue'
</script>

With form field

Wrap the control in <CFormField> to lay it out with its label and description, and to get validation feedback in the right place.

vue

<template>
  <CFormField>
    <CCheckbox id="fieldCheck" label="Subscribe to the newsletter" />
    <CFormText>We send one email a month, and never share your address.</CFormText>
  </CFormField>
</template>

<script setup>
import { CCheckbox, CFormField, CFormText } from '@coreui/vue'
</script>

Checkbox toggle buttons

Create button-like checkboxes and radio buttons by using button boolean property on the <CFormCheck> component. These toggle buttons can further be grouped in a button group if needed. Toggle buttons use the deprecated <CFormCheck>’s button mode — it has no <CCheckbox> counterpart.

vue

<template>
  <CFormCheck id="inlineCheckbox1" inline value="option1" label="1" />
  <CFormCheck id="inlineCheckbox2" inline value="option2" label="2" />
  <CFormCheck id="inlineCheckbox3" inline value="option3" label="3 (disabled)" disabled />
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
</script>

Outlined styles

Different variants of button, such at the various outlined styles, are supported.

vue

<template>
  <CFormCheck id="reverseCheckbox1" reverse value="option1" label="Reverse checkbox" />
  <CFormCheck
    id="reverseCheckbox2"
    reverse
    value="option2"
    label="Disabled reverse checkbox"
    disabled
  />
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
</script>

Theme variants

Modify the appearance of checked checkboxes with the theme property — it sets the checked background and border color to the theme color.

vue

<template>
  <div class="d-flex flex-column gap-3">
    <CFormField>
      <CCheckbox id="checkThemePrimary" theme="primary" label="Primary checkbox" checked />
    </CFormField>
    <CFormField>
      <CCheckbox id="checkThemeSecondary" theme="secondary" label="Secondary checkbox" checked />
    </CFormField>
    <CFormField>
      <CCheckbox id="checkThemeSuccess" theme="success" label="Success checkbox" checked />
    </CFormField>
    <CFormField>
      <CCheckbox id="checkThemeDanger" theme="danger" label="Danger checkbox" checked />
    </CFormField>
    <CFormField>
      <CCheckbox id="checkThemeWarning" theme="warning" label="Warning checkbox" checked />
    </CFormField>
    <CFormField>
      <CCheckbox id="checkThemeInfo" theme="info" label="Info checkbox" checked />
    </CFormField>
  </div>
</template>

<script setup>
import { CCheckbox, CFormField } from '@coreui/vue'
</script>

API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.