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.
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#
Indeterminate#
Checkboxes can utilize the:indeterminate pseudo-class when manually set viaindeterminate property.
Disabled#
Add thedisabled attribute and the associated<label>s are automatically styled to match with a lighter color to help indicate the input's state.
Default (stacked)#
By default, any number of checkboxes that are immediate sibling will be vertically stacked and appropriately spaced.
Inline#
Group checkboxes on the same horizontal row by addinginline boolean property to any<CFormCheck>.
Reverse#
Put your checkboxes on the opposite side by addingreverse boolean property.
Without labels#
Remember to still provide some form of accessible name for assistive technologies (for instance, usingaria-label).
Checkbox toggle buttons#
Create button-like checkboxes and radio buttons by usingbutton boolean property on the<CFormCheck> component. These toggle buttons can further be grouped in a button group if needed.
Outlined styles#
Different variants of button, such at the various outlined styles, are supported.
API#
Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.