React Radio Components
Radio
Create consistent cross-browser and cross-device radios with our React radio component.
Available in Other JavaScript Frameworks
CoreUI React Radio Components is also available for Angular, Bootstrap, and Vue. Explore framework-specific implementations below:
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.