Support CoreUI Development
CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.
You can support our Open Source software development in the following ways:
- Buy the CoreUI PRO, and get access to PRO components, and dedicated support.
- Became a sponsor, and get your logo on BACKERS.md/README.md files or each site of this documentation
- Give us a star ⭐️ on Github.
React Checkbox & Radio Components
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#
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/react'2// or3import CFormCheck from '@coreui/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 | - |
| feedback 4.2.0+ | Provide valuable, actionable feedback. | ReactNode | - |
| feedbackInvalid 4.2.0+ | Provide valuable, actionable feedback. | ReactNode | - |
| feedbackValid 4.2.0+ | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, :invalid and :valid. | ReactNode | - |
| floatingLabel 4.2.0+ | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, :invalid and :valid. | ReactNode | - |
| 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. | boolean | - |
| invalid | Set component validation state to invalid. | boolean | - |
| label | The element represents a caption for a component. | ReactNode | - |
| reverse | Put checkboxes or radios on the opposite side. | boolean | - |
| tooltipFeedback 4.2.0+ | Display validation feedback in a styled tooltip. | boolean | - |
| type | Specifies the type of component. | 'checkbox' | 'radio' | checkbox |
| valid | Set component validation state to valid. | boolean | - |
CFormSwitch#
1import { CFormSwitch } from '@coreui/react'2// or3import CFormSwitch from '@coreui/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 | - |
| reverse | Put switch on the opposite side. | boolean | - |
| 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 | - |