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 #

Default checkbox

Checked checkbox

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

Indeterminate #

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

Indeterminate checkbox

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

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.

Disabled checkbox

Disabled checked checkbox

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

Default (stacked) #

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

Default checkbox

Disabled checkbox

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

Inline #

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

1

2

3 (disabled)

<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/>

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="..."/>

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.

Single toggle

<CFormCheck :button="{ color: 'primary' }" id="btn-check" autocomplete="off" label="Single toggle"/>

Checked

<CFormCheck :button="{ color: 'primary' }" id="btn-check-2" autocomplete="off" label="Checked" checked/>

Disabled

<CFormCheck :button="{ color: 'primary' }" id="btn-check-3" autocomplete="off" label="Disabled" disabled/>

Outlined styles #

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

Single toggleChecked

<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/>

API #

CFormCheck #

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

Props #

Prop name	Description	Type	Values	Default
button	Create 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-area	Sets hit area to the full area of the component.	string	-
id	The id global attribute defines an identifier (ID) that must be unique in the whole document.	string	-
indeterminate	Input Checkbox indeterminate Property	boolean	-
inline	Group checkboxes or radios on the same horizontal row by adding.	boolean	-
invalid	Set component validation state to invalid.	boolean	-
label	The element represents a caption for a component.	string	-
model-value	The default name for a value passed using v-model.	boolean|string	-
tooltip-feedback 4.3.0+	Display validation feedback in a styled tooltip.	boolean	-
type	Specifies the type of component.	string	'checkbox', 'radio'	'checkbox'
valid	Set component validation state to valid.	boolean	-

Events #

Event name	Description	Properties
change	Event occurs when the checked value has been changed.
update:modelValue	Emit the new value whenever there’s a change event.