React Checkbox
React Checkbox 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.

React Radio

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.

React Radio Disabled
React Switches

A switch has the markup of a custom checkbox but uses the switch boolean properly to render a toggle switch. Switches also support the disabled attribute.

React Switches Sizes
React Checks and Radios Default layout (stacked)

By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced.

React Checks and Radios Inline

Group checkboxes or radios on the same horizontal row by adding inline boolean property to any <CFormCheck>.

React Checks and Radios Without labels

Remember to still provide some form of accessible name for assistive technologies (for instance, using aria-label).

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.

Radio toggle buttons

Outlined styles

Different variants of button, such at the various outlined styles, are supported.