Radio

Some features in this component requires CDB React Pro package.Clickhereto try it out.

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 Component

Choice 1

Choice 2

Choice 3

import 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 Component

Creating 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.

Choice 1

Choice 2

Choice 3

Choice 4

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]} ... />

Visually build tailwind css projects 10x faster using AI

Build Tailwind websites visually and ship projects to production in minutes instead of days. Generates code from your designs to export to your favourite frameworks like React, Vue, Angular.

Try Windframe out for free.

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically 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 Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

Progress

Select