---
title: React Checkbox Components
name: Checkbox
description: Create consistent cross-browser and cross-device checkboxes with our React checkbox components.
menu: Forms
route: /forms/checkbox
other_frameworks: checkbox
---

import { useEffect, useRef } from 'react'
import {
  CButton,
  CFormCheck,
} from '@coreui/react/src/index'

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

```jsx preview
<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.

```jsx preview
<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.

```jsx preview
<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.

```jsx preview
<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>`.

```jsx preview
<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.

```jsx preview
<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`).

```jsx preview
<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.

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

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

```jsx preview
<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.

```jsx preview
<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

<ScssDocs file="_variables.scss" capture="form-check-variables" />

## API

### CFormCheck

`markdown:CFormCheck.api.mdx`
