Bootstrap React Checks & Radios
Create consistent cross-browser and cross-device checkboxes and radios with our Bootstrap React Checkbox, radio, and switch components.
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#
1<CFormCheck id="flexCheckDefault" label="Default checkbox"/>2<CFormCheck id="flexCheckChecked" label="Checked checkbox" defaultChecked />
Indeterminate#
Checkboxes can utilize the :indeterminate pseudo-class when manually set via indeterminate property.
1<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.
1<CFormCheck label="Disabled checkbox" disabled/>2<CFormCheck label="Disabled checked checkbox" defaultChecked disabled/>
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.
1<CFormCheck type="radio" name="flexRadioDefault" id="flexRadioDefault1" label="Default radio"/>2<CFormCheck type="radio" name="flexRadioDefault" id="flexRadioDefault2" label="Checked radio" defaultChecked/>
Disabled#
1<CFormCheck type="radio" name="flexRadioDisabled" id="flexRadioDisabled" label="Disabled radio" disabled/>2<CFormCheck type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" label="Disabled checked radio" defaultChecked disabled/>
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.
1<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault"/>2<CFormSwitch label="Checked switch checkbox input" id="formSwitchCheckChecked" defaultChecked/>3<CFormSwitch label="Disabled switch checkbox input" id="formSwitchCheckDisabled" disabled/>4<CFormSwitch label="Disabled checked switch checkbox input" id="formSwitchCheckCheckedDisabled" defaultChecked disabled/>
Sizes#
1<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault"/>2<CFormSwitch size="lg" label="Large switch checkbox input" id="formSwitchCheckDefaultLg"/>3<CFormSwitch size="xl" label="Extra large switch checkbox input" id="formSwitchCheckDefaultXL"/>
Default (stacked)#
By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced.
1<CFormCheck id="defaultCheck1" label="Default checkbox"/>2<CFormCheck id="defaultCheck2" label="Disabled checkbox" disabled/>
1<CFormCheck type="radio" name="exampleRadios" id="exampleRadios1" value="option1" label="Default radio" defaultChecked/>2<CFormCheck type="radio" name="exampleRadios" id="exampleRadios2" value="option2" label="Second default radio"/>3<CFormCheck type="radio" name="exampleRadios" id="exampleRadios3" value="option3" label="Disabled radio" disabled/>
Inline#
Group checkboxes or radios on the same horizontal row by adding inline boolean property to any <CFormCheck>.
1<CFormCheck inline id="inlineCheckbox1" value="option1" label="1"/>2<CFormCheck inline id="inlineCheckbox2" value="option2" label="2"/>3<CFormCheck inline id="inlineCheckbox3" value="option3" label="3 (disabled)" disabled/>
1<CFormCheck inline type="radio" name="inlineRadioOptions" id="inlineCheckbox1" value="option1" label="1"/>2<CFormCheck inline type="radio" name="inlineRadioOptions" id="inlineCheckbox2" value="option2" label="2"/>3<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).
1<div>2 <CFormCheck id="checkboxNoLabel" value="" aria-label="..."/>3</div>4<div>5 <CFormCheck type="radio" name="radioNoLabel" id="radioNoLabel" value="" aria-label="..."/>6</div>
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#
1<CFormCheck button={{ color: 'primary' }} id="btn-check" autoComplete="off" label="Single toggle" />
1<CFormCheck2 button={{ color: 'primary' }}3 id="btn-check-2"4 autoComplete="off"5 label="Checked"6 defaultChecked7/>
1<CFormCheck2 button={{ color: 'primary' }}3 id="btn-check-3"4 autoComplete="off"5 label="Disabled"6 disabled7/>
Radio toggle buttons#
1<CFormCheck button={{ color: 'secondary' }} type="radio" name="options" id="option1" autoComplete="off" label="Checked" defaultChecked/>2<CFormCheck button={{ color: 'secondary' }} type="radio" name="options" id="option2" autoComplete="off" label="Radio"/>3<CFormCheck button={{ color: 'secondary' }} type="radio" name="options" id="option3" autoComplete="off" label="Radio" disabled/>4<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.
1<div>2 <CFormCheck button={{ color: 'primary', variant: 'outline' }} id="btn-check-outlined" autoComplete="off" label="Single toggle"/>3</div>4<div>5 <CFormCheck button={{ color: 'secondary', variant: 'outline' }} id="btn-check-2-outlined" autoComplete="off" label="Checked" defaultChecked/>6</div>7<div>8 <CFormCheck button={{ color: 'success', variant: 'outline' }} type="radio" name="options-outlined" id="success-outlined" autoComplete="off" label="Radio" defaultChecked/>9 <CFormCheck button={{ color: 'danger', variant: 'outline' }} type="radio" name="options-outlined" id="danger-outlined" autoComplete="off" label="Radio"/>10</div>
API#
CFormCheck#
1import { CFormCheck } from '@coreui/bootstrap-react'2// or3import CFormCheck from '@coreui/bootstrap-react/src/components/form/CFormCheck'
| Property | Description | Type | Default |
|---|---|---|---|
| button | Create button-like checkboxes and radio buttons. | ButtonObject | - |
| className | A string of all className you want applied to the component. | string | - |
| hitArea | Sets hit area to the full area of the component. | 'full' | - |
| 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. | ReactNode | - |
| type | Specifies the type of component. | 'checkbox' | 'radio' | checkbox |
| valid | Set component validation state to valid. | boolean | - |
CFormSwitch#
1import { CFormSwitch } from '@coreui/bootstrap-react'2// or3import CFormSwitch from '@coreui/bootstrap-react/src/components/form/CFormSwitch'
| Property | Description | Type | Default |
|---|---|---|---|
| className | A string of all className you want applied to the component. | string | - |
| 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. | ReactNode | - |
| size | Size the component large or extra large. Works only with switch | 'lg' | 'xl' | - |
| type | Specifies the type of component. | 'checkbox' | 'radio' | checkbox |
| valid | Set component validation state to valid. | boolean | - |