---
title: React Bootstrap Checkbox Component
name: Checkbox with Bootstrap Styling
description: Learn how to build accessible and consistent Bootstrap-style checkboxes in React using CoreUI components.
route: /forms/checkbox/
bootstrap_component: true
---

## How to use React Bootstrap Checkbox component

Use CoreUI’s `<CFormCheck>` to create cross-browser, accessible, and Bootstrap-styled checkboxes in React. Checkboxes are ideal for selecting one or more options from a list and can be styled, stacked, or grouped using layout utilities.

### Basic example

Use the `<CFormCheck>` component to render a standard Bootstrap-style checkbox.

<ExampleSnippet className="theme-bootstrap" component="CheckboxExample" componentName="React Bootstrap Checkbox" />

### Indeterminate state

Set the `indeterminate` property to render a checkbox in an indeterminate state, commonly used to indicate partial selections.

<ExampleSnippet className="theme-bootstrap" component="CheckboxIndeterminateExample" componentName="React Bootstrap Checkbox" />

### Disabled state

Add the `disabled` prop to disable a checkbox and automatically style its label in a muted color, following Bootstrap conventions.

<ExampleSnippet className="theme-bootstrap" component="CheckboxDisabledExample" componentName="React Bootstrap Checkbox" />

### Stacked layout (default)

By default, multiple checkboxes stack vertically and are spaced evenly.

<ExampleSnippet className="theme-bootstrap" component="CheckboxStackedExample" componentName="React Bootstrap Checkbox" />

### Inline checkboxes

Use the `inline` boolean prop to place multiple checkboxes on the same horizontal row.

<ExampleSnippet className="theme-bootstrap" component="CheckboxInlineExample" componentName="React Bootstrap Checkbox" />

### Reversed checkboxes

Use the `reverse` prop to position the checkbox on the opposite side of the label.

<ExampleSnippet className="theme-bootstrap" component="CheckboxReverseExample" componentName="React Bootstrap Checkbox" />

### Without labels

If omitting a label, remember to include `aria-label` for accessibility compliance.

<ExampleSnippet className="theme-bootstrap" component="CheckboxWithoutLabelsExample" componentName="React Bootstrap Checkbox" />

## Checkbox toggle buttons

Transform checkboxes into Bootstrap-style toggle buttons using the `button` prop. You can also group them with button groups.

<ExampleSnippet className="theme-bootstrap" component="CheckboxToggleButtonsExample" componentName="React Bootstrap Checkbox" />

### Outlined toggle styles

Use outlined button variants for a lighter, bordered appearance.

<ExampleSnippet className="theme-bootstrap" component="CheckboxToggleButtonsOutlinedStylesExample" componentName="React Bootstrap Checkbox" />

## API reference

Refer to the API documentation for detailed descriptions of all the available props and configuration options.

- [&lt;CFormCheck /&gt;](../api/#cformcheck)
