React Checkbox Components

Create consistent cross-browser and cross-device checkboxes with our React checkbox 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.

Checkboxes#

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

Default (stacked)#

By default, any number of checkboxes 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/>

Inline#

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

Without labels#

Remember to still provide some form of accessible name for assistive technologies (for instance, using aria-label).

1<CFormCheck id="checkboxNoLabel" value="" aria-label="..."/>

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

1<CFormCheck button={{ color: 'primary' }} id="btn-check" autoComplete="off" label="Single toggle" />
1<CFormCheck
2 button={{ color: 'primary' }}
3 id="btn-check-2"
4 autoComplete="off"
5 label="Checked"
6 defaultChecked
7/>
1<CFormCheck
2 button={{ color: 'primary' }}
3 id="btn-check-3"
4 autoComplete="off"
5 label="Disabled"
6 disabled
7/>

Outlined styles#

Different variants of button, such at the various outlined styles, are supported.

1<CFormCheck button={{ color: 'primary', variant: 'outline' }} id="btn-check-outlined" autoComplete="off" label="Single toggle"/>
2<CFormCheck button={{ color: 'secondary', variant: 'outline' }} id="btn-check-2-outlined" autoComplete="off" label="Checked" defaultChecked/>

API#

CFormCheck#

1import { CFormCheck } from '@coreui/react'
2// or
3import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
PropertyDescriptionTypeDefault
buttonCreate button-like checkboxes and radio buttons.ButtonObject-
classNameA 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-
hitAreaSets hit area to the full area of the component.'full'-
idThe id global attribute defines an identifier (ID) that must be unique in the whole document.string-
indeterminateInput Checkbox indeterminate Property.boolean-
inlineGroup checkboxes or radios on the same horizontal row by adding.boolean-
invalidSet component validation state to invalid.boolean-
labelThe element represents a caption for a component.ReactNode-
tooltipFeedback
4.2.0+
Display validation feedback in a styled tooltip.boolean-
typeSpecifies the type of component.'checkbox' | 'radio'checkbox
validSet component validation state to valid.boolean-