Vue Checkbox & Radio Components

Create consistent cross-browser and cross-device checkboxes and radios with our Vue checkbox, radio, and switch 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 radios are replaced with the help of <CFormCheck radio>. Radios are for selecting one option from many.

Radios

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 type="radio" name="flexRadioDefault" id="flexRadioDefault1" label="Default radio"/>
<CFormCheck type="radio" name="flexRadioDefault" id="flexRadioDefault2" label="Checked radio" checked/>

Disabled

<CFormCheck type="radio" name="flexRadioDisabled" id="flexRadioDisabled" label="Disabled radio" disabled/>
<CFormCheck type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" label="Disabled checked radio" checked disabled/>

Default (stacked)

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

<CFormCheck type="radio" name="exampleRadios" id="exampleRadios1" value="option1" label="Default radio" checked/>
<CFormCheck type="radio" name="exampleRadios" id="exampleRadios2" value="option2" label="Second default radio"/>
<CFormCheck type="radio" name="exampleRadios" id="exampleRadios3" value="option3" label="Disabled radio" disabled/>

Inline

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

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

Reverse

Put your radios on the opposite side by adding reverse boolean property.

<CFormCheck reverse type="radio" id="reverseOption1" value="option1" label="Reverse radio"/>
<CFormCheck reverse type="radio" id="reverseOption2" value="option2" label="Disabled reverse radio" disabled/>

Without labels

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

<CFormCheck type="radio" name="radioNoLabel" id="radioNoLabel" value="" aria-label="..."/>

Toggle buttons

Create button-like radio 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: 'secondary' }" type="radio" name="options" id="option1" autocomplete="off" label="Checked" checked/>
<CFormCheck :button="{ color: 'secondary' }" type="radio" name="options" id="option2" autocomplete="off" label="Radio"/>
<CFormCheck :button="{ color: 'secondary' }" type="radio" name="options" id="option3" autocomplete="off" label="Radio" disabled/>
<CFormCheck :button="{ color: 'secondary' }" type="radio" name="options" id="option4" autocomplete="off" label="Radio"/>

Outlined styles

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

<CFormCheck :button="{ color: 'success', variant: 'outline' }" type="radio" name="options-outlined" id="success-outlined" autocomplete="off" label="Radio" checked/>
<CFormCheck :button="{ color: 'danger', variant: 'outline' }" type="radio" name="options-outlined" id="danger-outlined" autocomplete="off" label="Radio"/>

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 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--
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--
typeSpecifies the type of component.string'checkbox', 'radio''checkbox'
validSet component validation state to valid.boolean--
valueThe value attribute of component.string--

Events

Event nameDescriptionProperties
changeEvent occurs when the checked value has been changed.
update:modelValueEmit the new value whenever there’s a change event.