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.
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 />
Indeterminate
Checkboxes can utilize the :indeterminate pseudo-class when manually set via indeterminate property.
<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.
<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.
<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>.
<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/>
Reverse
Put your checkboxes on the opposite side by adding reverse boolean property.
<CFormCheck reverse id="reverseCheckbox1" value="option1" label="Reverse checkbox"/>
<CFormCheck reverse id="reverseCheckbox2" value="option2" label="Disabled reverse checkbox" 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.
<CFormCheck :button="{ color: 'primary' }" id="btn-check" autocomplete="off" label="Single toggle"/>
<CFormCheck :button="{ color: 'primary' }" id="btn-check-2" autocomplete="off" label="Checked" checked/>
<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.
<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/>
Customizing
SASS variables
$form-check-input-width: 1em !default;
$form-check-min-height: $font-size-base * $line-height-base !default;
$form-check-padding-start: $form-check-input-width + .5em !default;
$form-check-margin-bottom: .125rem !default;
$form-check-label-color: unset !default;
$form-check-label-cursor: null !default;
$form-check-transition: null !default;
$form-check-input-active-filter: brightness(90%) !default;
$form-check-input-bg: $input-bg !default;
$form-check-input-border: 1px solid rgba($black, .25) !default;
$form-check-input-border-radius: .25em !default;
$form-check-radio-border-radius: 50% !default;
$form-check-input-focus-border: $input-focus-border-color !default;
$form-check-input-focus-box-shadow: $input-btn-focus-box-shadow !default;
$form-check-input-checked-color: $component-active-color !default;
$form-check-input-checked-bg-color: $component-active-bg !default;
$form-check-input-checked-border-color: $form-check-input-checked-bg-color !default;
$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>") !default;
$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;
$form-check-input-indeterminate-color: $component-active-color !default;
$form-check-input-indeterminate-bg-color: $component-active-bg !default;
$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default;
$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;
$form-check-input-disabled-opacity: .5 !default;
$form-check-label-disabled-opacity: $form-check-input-disabled-opacity !default;
$form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default;
$form-check-inline-margin-end: 1rem !default;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 | - | - |
| reverse 4.8.0+ | Put checkboxes or radios on the opposite side. | boolean | - | - |
| 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 | - | - |
| value | The value attribute of component. | string | - | - |
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. |