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.

• Angular Radio
• Bootstrap Radio
• React Radio

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.

Default radio

Checked radio

<CFormCheck type="radio" name="flexRadioDefault" id="flexRadioDefault1" label="Default radio"/>
<CFormCheck type="radio" name="flexRadioDefault" id="flexRadioDefault2" label="Checked radio" checked/>

Disabled #

Disabled radio

Disabled checked radio

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

Default radio

Second default radio

Disabled radio

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

1

2

3 (disabled)

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

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.

CheckedRadioRadioRadio

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

RadioRadio

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

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.