React Radio Components
Radio
Create consistent cross-browser and cross-device radios with our React radio component.
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 radios are replaced with the help of <CFormCheck type="radio">. Radios are for selecting one option from many.
Radios#
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 radios that are immediate sibling will be vertically stacked and appropriately spaced.
Inline#
Group radios on the same horizontal row by adding inline boolean property to any <CFormCheck radio>.
Reverse#
Put your radios 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).
Radio toggle buttons#
Create button-like radio buttons by using button boolean property on the <CFormCheck radio> 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.