Radio
React Bootstrap 5 Radio
A React Bootstrap 5 5 radio button is a component that lets a user to select one of several options from a list, whereas Checkboxes
are used to pick multiple options.
Importing the React Bootstrap 5 Radio Component
You can Import CDBRadio
into your project to use the Contrast React Bootstrap 5 Radio component.
import { CDBRadio} from "cdbreact";
Radio Button
Pro Componentimport React from "react";import { CDBRadio, CDBContainer } from "cdbreact";
export const Radio = () => { return ( <CDBContainer> <CDBRadio value="Choice 1" fill="#eb7434" colorfill="#eb7434" /> <CDBRadio value="Choice 2" fill="green" colorfill="red"/> <CDBRadio value="Choice 3" fill="#000000" colorfill="#000000" /> </CDBContainer> );};
Radio Group
Pro ComponentCreating several radio buttons can be time-consuming and, frankly, can be easy with the React Bootstrap 5 5 RadioGroup component.
You can simply do this using the CDBRadioGroup
component which has a 'answers' prop. This answers
prop accepts a list of options and generates a number of radio buttons.
import React from "react";import { CDBRadioGroup, CDBContainer } from "cdbreact";
export const Radio = () => { return ( <CDBContainer> <CDBRadioGroup fill="#eb7434" colorfill="#eb7434" answers={['Choice 1', 'Choice 2', 'Choice 3', 'Choice 4']} /> </CDBContainer> );};
API Reference: Contrast React Bootstrap 5 Radio Props
This lesson will expand your understanding of the props that may be used with the Contrast React Bootstrap 5 Radio component. You'll discover what these properties perform, what their default values are, and how you'd use them in your code.
The table below provides the CDBRadio
various prop options.
Name | Type | Default | Description | Example |
---|---|---|---|---|
className | String | Adds custom classes | <CDBRadio className="myClass" ... /> | |
fill | String | #455ff5 | Sets the color of the unselected radio button | <CDBRadio fill="#000000" ... /> |
colorfill | String | Sets the color of the selected radio button | <CDBRadio colorFill="#000000" ... /> | |
value | String | The value of the input element | <CDBRadio value="Choice1" ... /> |
API Reference: Contrast React Bootstrap 5 Radio Group Properties
API Reference: Contrast Radio Group Props
The table below provides the CDBRadioGroup
various prop options.
Name | Type | Default | Description | Example |
---|---|---|---|---|
className | String | Adds custom classes | <CDBRadioGroup className="myClass" ... /> | |
fill | String | #455ff5 | Sets the color of the unselected radio button | <CDBRadioGroup fill="#000000" ... /> |
colorfill | String | Sets the color of the selected radio button | <CDBRadioGroup colorFill="#000000" ... /> | |
answers | Array | [] | The list of values of the input element | <CDBRadioGroup answers={[choice1, choice2, choice3]} ... /> |
Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast