CoreUI for Vue.js logo
Angular JavaScript / Vanilla JS React.js
  • undefinedGetting started
  • undefinedCustomize
  • undefinedLayout
  • undefinedForms
  • undefinedComponents
  • undefinedTemplates
  • undefinedMigration
  • undefined
  • undefined
  • undefined
undefinedDownloadundefinedHire Us Get CoreUI PRO

Support CoreUI Development

CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.

You can support our Open Source software development in the following ways:

  • Buy the CoreUI PRO, and get access to PRO components, and dedicated support.
  • Hire Us! We create stunning designs, high-conversion landing pages, functional mobile apps and reliable web services – everything you need to offer your products or services online and always stay a tap away from your customers.
  • Give us a star ⭐️ on Github.

Vue Checkbox Component

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

Other frameworks

CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and React components. To learn more please visit the following pages.

  • Angular Checkbox
  • Bootstrap Checkbox
  • React Checkbox

Approach #

Browser default checkboxes are replaced with the help of <CFormCheck>. Checkboxes are for selecting one or several options in a list.

Checks #

<CFormCheck id="flexCheckDefault" label="Default checkbox"/>
<CFormCheck id="flexCheckChecked" label="Checked checkbox" checked />
1
2

Indeterminate #

Checkboxes can utilize the :indeterminate pseudo-class when manually set via indeterminate property.

<CFormCheck id="flexCheckIndeterminate" label="Indeterminate checkbox" indeterminate />
1

Disabled #

Add the disabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input's state.

<CFormCheck label="Disabled checkbox" disabled/>
<CFormCheck label="Disabled checked checkbox" checked disabled/>
1
2

Default (stacked) #

By default, any number of checkboxes that are immediate sibling will be vertically stacked and appropriately spaced.

<CFormCheck id="defaultCheck1" label="Default checkbox"/>
<CFormCheck id="defaultCheck2" label="Disabled checkbox" disabled/>
1
2

Inline #

Group checkboxes on the same horizontal row by adding inline boolean property to any <CFormCheck>.

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

Without labels #

Remember to still provide some form of accessible name for assistive technologies (for instance, using aria-label).

<CFormCheck id="checkboxNoLabel" value="" aria-label="..."/>
1

Toggle buttons #

Create button-like checkboxes buttons by using button boolean property on the <CFormCheck> component. These toggle buttons can further be grouped in a button group if needed.

<CFormCheck :button="{ color: 'primary' }" id="btn-check" autocomplete="off" label="Single toggle"/>
1
<CFormCheck :button="{ color: 'primary' }" id="btn-check-2" autocomplete="off" label="Checked" checked/>
1
<CFormCheck :button="{ color: 'primary' }" id="btn-check-3" autocomplete="off" label="Disabled" disabled/>
1

Outlined styles #

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

<CFormCheck :button="{ color: 'primary', variant: 'outline' }" id="btn-check-outlined" autocomplete="off" label="Single toggle"/>
<CFormCheck :button="{ color: 'secondary', variant: 'outline' }" id="btn-check-2-outlined" autocomplete="off" label="Checked" checked/>
1
2

API #

CFormCheck #

import { CFormCheck } from '@coreui/vue'
// or
import CFormCheck from '@coreui/vue/src/components/form/CFormCheck'
1
2
3

Props #

Prop nameDescriptionTypeValuesDefault
buttonCreate button-like checkboxes and radio buttons.
@see http://coreui.io/vue/docs/components/button.html
object-
feedback
4.3.0+
Provide valuable, actionable feedback.string-
feedback-invalid
4.3.0+
Provide valuable, actionable feedback.string-
feedback-valid
4.3.0+
Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, :invalid and :valid.string-
hit-areaSets hit area to the full area of the component.string-
idThe id global attribute defines an identifier (ID) that must be unique in the whole document.string-
indeterminateInput Checkbox indeterminate Propertyboolean-
inlineGroup checkboxes or radios on the same horizontal row by adding.boolean-
invalidSet component validation state to invalid.boolean-
labelThe element represents a caption for a component.string-
model-valueThe default name for a value passed using v-model.boolean|string-
tooltip-feedback
4.3.0+
Display validation feedback in a styled tooltip.boolean-
typeSpecifies the type of component.string'checkbox', 'radio''checkbox'
validSet component validation state to valid.boolean-

Events #

Event nameDescriptionProperties
changeEvent occurs when the checked value has been changed.
update:modelValueEmit the new value whenever there’s a change event.
On this page
  • Approach
  • Checks
  • Indeterminate
    • Disabled
  • Default (stacked)
  • Inline
  • Without labels
  • Toggle buttons
    • Outlined styles
  • API
    • CFormCheck
  • GitHub
  • Twitter
  • CoreUI (Vanilla)
  • CoreUI for Angular
  • CoreUI for React.js

CoreUI for Vue is Open Source UI Components Library for Vue.js.

CoreUI code licensed MIT, docs CC BY 3.0. CoreUI PRO requires a commercial license.