React Bootstrap Radio Component
Radio with Bootstrap Styling
Bootstrap 5 components designed for React.js
This component is part of the CoreUI for React.js UI components library, which offers all Bootstrap components designed to work seamlessly with React.js.
If you want to use Bootstrap 5 in a React.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.
Learn how to build consistent, accessible, and customizable radio buttons using CoreUI’s React components styled with Bootstrap.
How to use React Bootstrap Radio component#
Use CoreUI’s <CFormCheck type="radio"> component to create Bootstrap-styled radio buttons for selecting one option from many. These components are built to be accessible, customizable, and responsive.
Default stacked radios#
By default, multiple radio buttons rendered as siblings will be stacked vertically with proper spacing.
Disabled state#
Add the disabled prop to disable a radio button. The associated label will also receive a muted style to reflect its state.
Inline radios#
Display radio buttons in a horizontal row by adding the inline prop to each <CFormCheck type="radio">.
Reverse layout#
Use the reverse prop to position the label text on the opposite side of the radio input.
Radios without labels#
You can omit visual labels, but make sure to provide accessible names using aria-label for screen readers.
Radio toggle buttons#
Turn your radios into button-like toggles using the button prop. These can also be grouped using a button group component.
Outlined toggle styles#
You can apply outlined styles to toggle radios using Bootstrap's button variant system.
API reference#
Refer to the API documentation below for a complete list of props supported by the React Bootstrap radio component.