React Checkbox Components
Checkbox
Limited-time offer for the first 100 customers in 2025. Use code 2025SKY25 at checkout.
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 via indeterminate property.
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.
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 adding inline boolean property to any <CFormCheck>.
Reverse#
Put your checkboxes on the opposite side by adding reverse boolean property.
Without labels#
Remember to still provide some form of accessible name for assistive technologies (for instance, using 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.
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.