Bootstrap Vue Checkbox & Radio Components
Create consistent cross-browser and cross-device checkboxes and radios with our Bootstrap Vue checkbox, radio, and switch components.
On this page
Approach
Browser default checkboxes and radios are replaced with the help of <CFormCheck>. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
Checks
<CFormCheck id="flexCheckDefault" label="Default checkbox"/>
<CFormCheck id="flexCheckChecked" label="Checked checkbox" checked />
1
2
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
2
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/>
1
2
2
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/>
1
2
2
Switches
A switch has the markup of a custom checkbox but uses the switch boolean properly to render a toggle switch. Switches also support the disabled attribute.
<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault"/>
<CFormSwitch label="Checked switch checkbox input" id="formSwitchCheckChecked" checked/>
<CFormSwitch label="Disabled switch checkbox input" id="formSwitchCheckDisabled" disabled/>
<CFormSwitch label="Disabled checked switch checkbox input" id="formSwitchCheckCheckedDisabled" checked disabled/>
1
2
3
4
2
3
4
Sizes
<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault"/>
<CFormSwitch size="lg" label="Large switch checkbox input" id="formSwitchCheckDefaultLg"/>
<CFormSwitch size="xl" label="Extra large switch checkbox input" id="formSwitchCheckDefaultXL"/>
1
2
3
2
3
Default (stacked)
By default, any number of checkboxes and radios 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
2
<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/>
1
2
3
2
3
Inline
Group checkboxes or radios 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
2
3
<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/>
1
2
3
2
3
Without labels
Remember to still provide some form of accessible name for assistive technologies (for instance, using aria-label).
<div>
<CFormCheck id="checkboxNoLabel" value="" aria-label="..."/>
</div>
<div>
<CFormCheck type="radio" name="radioNoLabel" id="radioNoLabel" value="" aria-label="..."/>
</div>
1
2
3
4
5
6
2
3
4
5
6
Toggle buttons
Create button-like checkboxes and radio buttons by using button boolean property on the <CFormCheck> component. These toggle buttons can further be grouped in a button group if needed.
Checkbox toggle buttons
<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
Radio toggle buttons
<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"/>
1
2
3
4
2
3
4
Outlined styles
Different variants of button, such at the various outlined styles, are supported.
<div>
<CFormCheck :button="{ color: 'primary', variant: 'outline' }" id="btn-check-outlined" autoComplete="off" label="Single toggle"/>
</div>
<div>
<CFormCheck :button="{ color: 'secondary', variant: 'outline' }" id="btn-check-2-outlined" autoComplete="off" label="Checked" checked/>
</div>
<div>
<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"/>
</div>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
API
CFormCheck
import { CFormCheck } from '@coreui/bootstrap-vue'
// or
import CFormCheck from '@coreui/bootstrap-vue/src/components/form/CFormCheck'
1
2
3
2
3
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| button | Create button-like checkboxes and radio buttons. | string({ / * _ Sets the color context of the component to one of Bootstrap Vue’s themed colors. _ _ @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light' _/ color: Color, / _ Select the shape of the component. _ _ @values 'rounded', 'rounded-top', 'rounded-end', 'rounded-bottom', 'rounded-start', 'rounded-circle', 'rounded-pill', 'rounded-0', 'rounded-1', 'rounded-2', 'rounded-3' _/ shape: Shape, / _ Size the component small or large. _ _ @values 'sm' | 'lg' _/ size: { type: String, default: undefined, required: false, validator: (value: string) => { return ['sm', 'lg'].includes(value) }, }, / _ Set the button variant to an outlined button or a ghost button. _/ variant: { type: String, default: undefined, required: false, validator: (value: string) => { return ['outline', 'ghost'].includes(value) }, }, }) | - | |
| 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 | - | |
| 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-model-value | Emit the new value whenever there’s a change event. |
CFormSwitch
import { CFormSwitch } from '@coreui/bootstrap-vue'
// or
import CFormSwitch from '@coreui/bootstrap-vue/src/components/form/CFormSwitch'
1
2
3
2
3
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| id | The id global attribute defines an identifier (ID) that must be unique in the whole document | string | - | - |
| 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 | - | |
| size | Size the component large or extra large. Works only with switch. | string | 'lg' | 'xl' | - |
| 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-model-value | Emit the new value whenever there’s a change event. |