React Bootstrap Checkbox Component
Checkbox with Bootstrap Styling
Bootstrap 5 components designed for React.js
This component is part of the CoreUI for React.js UI components library, which offers all Bootstrap components designed to work seamlessly with React.js.
If you want to use Bootstrap 5 in a React.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.
Learn how to build accessible and consistent Bootstrap-style checkboxes in React using CoreUI components.
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.
Indeterminate state#
Set the indeterminate property to render a checkbox in an indeterminate state, commonly used to indicate partial selections.
Disabled state#
Add the disabled prop to disable a checkbox and automatically style its label in a muted color, following Bootstrap conventions.
Stacked layout (default)#
By default, multiple checkboxes stack vertically and are spaced evenly.
Inline checkboxes#
Use the inline boolean prop to place multiple checkboxes on the same horizontal row.
Reversed checkboxes#
Use the reverse prop to position the checkbox on the opposite side of the label.
Without labels#
If omitting a label, remember to include aria-label for accessibility compliance.
Checkbox toggle buttons#
Transform checkboxes into Bootstrap-style toggle buttons using the button prop. You can also group them with button groups.
Outlined toggle styles#
Use outlined button variants for a lighter, bordered appearance.
API reference#
Refer to the API documentation for detailed descriptions of all the available props and configuration options.