React Checkbox Components

Checkbox

Create consistent cross-browser and cross-device checkboxes with our React checkbox components.

Other frameworks

CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.

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.

Checkboxes#

Default checkbox

Checked checkbox

<CFormCheck id="flexCheckDefault" label="Default checkbox"/>
<CFormCheck id="flexCheckChecked" label="Checked checkbox" defaultChecked />

Indeterminate#

Checkboxes can utilize the :indeterminate pseudo-class when manually set via indeterminate property.

Indeterminate checkbox

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

Disabled checkbox

Disabled checked checkbox

<CFormCheck label="Disabled checkbox" disabled/>
<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.

Default checkbox

Disabled checkbox

<CFormCheck id="defaultCheck1" label="Default checkbox"/>
<CFormCheck id="defaultCheck2" label="Disabled checkbox" disabled/>

Inline#

Group checkboxes on the same horizontal row by adding inline boolean property to any <CFormCheck>.

3 (disabled)

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

Reverse#

Put your checkboxes on the opposite side by adding reverse boolean property.

Reverse checkbox

Disabled reverse checkbox

<CFormCheck reverse id="reverseCheckbox1" value="option1" label="Reverse checkbox"/>
<CFormCheck reverse id="reverseCheckbox2" value="option2" label="Disabled reverse checkbox" disabled/>

Without labels#

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

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

Single toggle

<CFormCheck button={{ color: 'primary' }} id="btn-check" autoComplete="off" label="Single toggle" />

Checked

<CFormCheck
  button={{ color: 'primary' }}
  id="btn-check-2"
  autoComplete="off"
  label="Checked"
  defaultChecked
/>

Disabled

<CFormCheck
  button={{ color: 'primary' }}
  id="btn-check-3"
  autoComplete="off"
  label="Disabled"
  disabled
/>

Outlined styles#

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

Single toggleChecked

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

Customizing#

SASS variables#

$form-check-input-width:                  1em !default;
$form-check-min-height:                   $font-size-base * $line-height-base !default;
$form-check-padding-start:                $form-check-input-width + .5em !default;
$form-check-margin-bottom:                .125rem !default;
$form-check-label-color:                  null !default;
$form-check-label-cursor:                 null !default;
$form-check-transition:                   null !default;

$form-check-input-active-filter:          brightness(90%) !default;

$form-check-input-bg:                     $input-bg !default;
$form-check-input-border:                 var(--cui-border-width) solid var(--cui-border-color) !default;
$form-check-input-border-radius:          .25em !default;
$form-check-radio-border-radius:          50% !default;
$form-check-input-focus-border:           $input-focus-border-color !default;
$form-check-input-focus-box-shadow:       $focus-ring-box-shadow !default;

$form-check-input-checked-color:          $component-active-color !default;
$form-check-input-checked-bg-color:       $component-active-bg !default;
$form-check-input-checked-border-color:   $form-check-input-checked-bg-color !default;
$form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>") !default;
$form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;

$form-check-input-indeterminate-color:          $component-active-color !default;
$form-check-input-indeterminate-bg-color:       $component-active-bg !default;
$form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-bg-color !default;
$form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;

$form-check-input-disabled-opacity:        .5 !default;
$form-check-label-disabled-opacity:        $form-check-input-disabled-opacity !default;
$form-check-btn-check-disabled-opacity:    $btn-disabled-opacity !default;

$form-check-inline-margin-end:    1rem !default;

API#

CFormCheck#

import { CFormCheck } from '@coreui/react'
// or
import 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`	-