React Checkbox & Radio Components
Checks & radios
Create consistent cross-browser and cross-device checkboxes and radios with our 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#
<CFormCheckid="flexCheckDefault"label="Default checkbox"/><CFormCheckid="flexCheckChecked"label="Checked checkbox"defaultChecked/>
Indeterminate#
Checkboxes can utilize the:indeterminate pseudo-class when manually set viaindeterminate property.
<CFormCheckid="flexCheckIndeterminate"label="Indeterminate checkbox"indeterminate/>
Disabled#
Add thedisabled attribute and the associated<label>s are automatically styled to match with a lighter color to help indicate the input's state.
<CFormChecklabel="Disabled checkbox"disabled/><CFormChecklabel="Disabled checked checkbox"defaultCheckeddisabled/>
Radios#
Add thedisabled attribute and the associated<label>s are automatically styled to match with a lighter color to help indicate the input's state.
<CFormChecktype="radio"name="flexRadioDefault"id="flexRadioDefault1"label="Default radio"/><CFormChecktype="radio"name="flexRadioDefault"id="flexRadioDefault2"label="Checked radio"defaultChecked/>
Disabled#
<CFormChecktype="radio"name="flexRadioDisabled"id="flexRadioDisabled"label="Disabled radio"disabled/><CFormChecktype="radio"name="flexRadioDisabled"id="flexRadioCheckedDisabled"label="Disabled checked radio"defaultCheckeddisabled/>
Switches#
A switch has the markup of a custom checkbox but uses theswitch boolean properly to render a toggle switch. Switches also support thedisabled attribute.
<CFormSwitchlabel="Default switch checkbox input"id="formSwitchCheckDefault"/><CFormSwitchlabel="Checked switch checkbox input"id="formSwitchCheckChecked"defaultChecked/><CFormSwitchlabel="Disabled switch checkbox input"id="formSwitchCheckDisabled"disabled/><CFormSwitchlabel="Disabled checked switch checkbox input"id="formSwitchCheckCheckedDisabled"defaultCheckeddisabled/>
Sizes#
<CFormSwitchlabel="Default switch checkbox input"id="formSwitchCheckDefault"/><CFormSwitchsize="lg"label="Large switch checkbox input"id="formSwitchCheckDefaultLg"/><CFormSwitchsize="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.
<CFormCheckid="defaultCheck1"label="Default checkbox"/><CFormCheckid="defaultCheck2"label="Disabled checkbox"disabled/>
<CFormChecktype="radio"name="exampleRadios"id="exampleRadios1"value="option1"label="Default radio"defaultChecked/><CFormChecktype="radio"name="exampleRadios"id="exampleRadios2"value="option2"label="Second default radio"/><CFormChecktype="radio"name="exampleRadios"id="exampleRadios3"value="option3"label="Disabled radio"disabled/>
Inline#
Group checkboxes or radios on the same horizontal row by addinginline boolean property to any<CFormCheck>.
<CFormCheckinlineid="inlineCheckbox1"value="option1"label="1"/><CFormCheckinlineid="inlineCheckbox2"value="option2"label="2"/><CFormCheckinlineid="inlineCheckbox3"value="option3"label="3 (disabled)"disabled/>
<CFormCheckinlinetype="radio"name="inlineRadioOptions"id="inlineCheckbox1"value="option1"label="1"/><CFormCheckinlinetype="radio"name="inlineRadioOptions"id="inlineCheckbox2"value="option2"label="2"/><CFormCheckinlinetype="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, usingaria-label).
<div><CFormCheckid="checkboxNoLabel"value=""aria-label="..."/></div><div><CFormChecktype="radio"name="radioNoLabel"id="radioNoLabel"value=""aria-label="..."/></div>
Toggle buttons#
Create button-like checkboxes and radio buttons by usingbutton boolean property on the<CFormCheck> component. These toggle buttons can further be grouped in a button group if needed.
Checkbox toggle buttons#
<CFormCheckbutton={{color:'primary'}}id="btn-check"autoComplete="off"label="Single toggle"/>
<CFormCheckbutton={{color:'primary'}}id="btn-check-2"autoComplete="off"label="Checked"defaultChecked/>
<CFormCheckbutton={{color:'primary'}}id="btn-check-3"autoComplete="off"label="Disabled"disabled/>
Radio toggle buttons#
<CFormCheckbutton={{color:'secondary'}}type="radio"name="options"id="option1"autoComplete="off"label="Checked"defaultChecked/><CFormCheckbutton={{color:'secondary'}}type="radio"name="options"id="option2"autoComplete="off"label="Radio"/><CFormCheckbutton={{color:'secondary'}}type="radio"name="options"id="option3"autoComplete="off"label="Radio"disabled/><CFormCheckbutton={{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.
<div><CFormCheckbutton={{color:'primary',variant:'outline'}}id="btn-check-outlined"autoComplete="off"label="Single toggle"/></div><div><CFormCheckbutton={{color:'secondary',variant:'outline'}}id="btn-check-2-outlined"autoComplete="off"label="Checked"defaultChecked/></div><div><CFormCheckbutton={{color:'success',variant:'outline'}}type="radio"name="options-outlined"id="success-outlined"autoComplete="off"label="Radio"defaultChecked/><CFormCheckbutton={{color:'danger',variant:'outline'}}type="radio"name="options-outlined"id="danger-outlined"autoComplete="off"label="Radio"/></div>
API#
CFormCheck#
import{CFormCheck}from'@coreui/react'// orimportCFormCheckfrom'@coreui/react/src/components/form/CFormCheck'
| Property | Default | Type |
|---|---|---|
| button# | - | ButtonObject |
Create button-like checkboxes and radio buttons. | ||
| className# | - | string |
A string of all className you want applied to the component. | ||
| feedback#4.2.0+ | - | ReactNode |
Provide valuable, actionable feedback. | ||
| feedbackInvalid#4.2.0+ | - | ReactNode |
Provide valuable, actionable feedback. | ||
| feedbackValid#4.2.0+ | - | ReactNode |
Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, | ||
| floatingLabel#4.2.0+ | - | ReactNode |
Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, | ||
| hitArea# | - | 'full' |
Sets hit area to the full area of the component. | ||
| id# | - | string |
The id global attribute defines an identifier (ID) that must be unique in the whole document. | ||
| indeterminate# | - | boolean |
Input Checkbox indeterminate Property. | ||
| inline# | - | boolean |
Group checkboxes or radios on the same horizontal row. | ||
| invalid# | - | boolean |
Set component validation state to invalid. | ||
| label# | - | ReactNode |
The element represents a caption for a component. | ||
| reverse# | - | boolean |
Put checkboxes or radios on the opposite side. | ||
| tooltipFeedback#4.2.0+ | - | boolean |
Display validation feedback in a styled tooltip. | ||
| type# | checkbox | 'checkbox','radio' |
Specifies the type of component. | ||
| valid# | - | boolean |
Set component validation state to valid. | ||
CFormSwitch#
import{CFormSwitch}from'@coreui/react'// orimportCFormSwitchfrom'@coreui/react/src/components/form/CFormSwitch'
| Property | Default | Type |
|---|---|---|
| className# | - | string |
A string of all className you want applied to the component. | ||
| id# | - | string |
The id global attribute defines an identifier (ID) that must be unique in the whole document. | ||
| invalid# | - | boolean |
Set component validation state to invalid. | ||
| label# | - | ReactNode |
The element represents a caption for a component. | ||
| reverse# | - | boolean |
Put switch on the opposite side. | ||
| size# | - | 'lg','xl' |
Size the component large or extra large. Works only with | ||
| type# | checkbox | 'checkbox','radio' |
Specifies the type of component. | ||
| valid# | - | boolean |
Set component validation state to valid. | ||