Radio

Radio button is a component used for allowing a user to make a single choice among many options, while Checkboxes are for selecting multiple options.

Single Radio Example

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>
  );
};

CDBRadio

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

In this section you will find advanced information about the Radio component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.

Contrast Radio Import Statement

You need to import the Contrast Radio component first before using it.

import { CDBRadio, CDBRadioGroup } from "cdbreact";

API Reference: Contrast Radio Properties

The table below shows the configuration options of the CDBRadio component.

API Reference: Contrast Radio Group Properties

The table below shows the configuration options of the CDBRadioGroup component.