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.

On this page

How to use React Bootstrap Radio component

Use CoreUI’s <CRadio> 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.

import React from 'react'
import { CFormField, CRadio } from '@coreui/react'

export const RadioExample = () => {
  return (
    <>
      <CFormField>
        <CRadio name="flexRadioDefault" id="flexRadioDefault1" label="Default radio" />
      </CFormField>
      <CFormField>
        <CRadio
          name="flexRadioDefault"
          id="flexRadioDefault2"
          label="Default checked radio"
          defaultChecked
        />
      </CFormField>
    </>
  )
}

import React from 'react'
import { CFormField, CRadio } from '@coreui/react'

export const RadioExample = () => {
  return (
    <>
      <CFormField>
        <CRadio name="flexRadioDefault" id="flexRadioDefault1" label="Default radio" />
      </CFormField>
      <CFormField>
        <CRadio
          name="flexRadioDefault"
          id="flexRadioDefault2"
          label="Default checked radio"
          defaultChecked
        />
      </CFormField>
    </>
  )
}

Disabled state

Add the disabled prop to disable a radio button. The associated label will also receive a muted style to reflect its state.

import React from 'react'
import { CFormField, CRadio } from '@coreui/react'

export const RadioDisabledExample = () => {
  return (
    <>
      <CFormField>
        <CRadio name="flexRadioDisabled" id="flexRadioDisabled" label="Disabled radio" disabled />
      </CFormField>
      <CFormField>
        <CRadio
          name="flexRadioDisabled"
          id="flexRadioCheckedDisabled"
          label="Disabled checked radio"
          defaultChecked
          disabled
        />
      </CFormField>
    </>
  )
}

import React from 'react'
import { CFormField, CRadio } from '@coreui/react'

export const RadioDisabledExample = () => {
  return (
    <>
      <CFormField>
        <CRadio name="flexRadioDisabled" id="flexRadioDisabled" label="Disabled radio" disabled />
      </CFormField>
      <CFormField>
        <CRadio
          name="flexRadioDisabled"
          id="flexRadioCheckedDisabled"
          label="Disabled checked radio"
          defaultChecked
          disabled
        />
      </CFormField>
    </>
  )
}

Inline radios

Display radio buttons in a horizontal row with a flex utility wrapper.

import React from 'react'
import { CFormField, CRadio } from '@coreui/react'

export const RadioInlineExample = () => {
  return (
    <div className="d-flex gap-4">
      <CFormField>
        <CRadio name="inlineRadioOptions" id="inlineRadio1" value="option1" label="1" />
      </CFormField>
      <CFormField>
        <CRadio name="inlineRadioOptions" id="inlineRadio2" value="option2" label="2" />
      </CFormField>
      <CFormField>
        <CRadio
          name="inlineRadioOptions"
          id="inlineRadio3"
          value="option3"
          label="3 (disabled)"
          disabled
        />
      </CFormField>
    </div>
  )
}

import React from 'react'
import { CFormField, CRadio } from '@coreui/react'

export const RadioInlineExample = () => {
  return (
    <div className="d-flex gap-4">
      <CFormField>
        <CRadio name="inlineRadioOptions" id="inlineRadio1" value="option1" label="1" />
      </CFormField>
      <CFormField>
        <CRadio name="inlineRadioOptions" id="inlineRadio2" value="option2" label="2" />
      </CFormField>
      <CFormField>
        <CRadio
          name="inlineRadioOptions"
          id="inlineRadio3"
          value="option3"
          label="3 (disabled)"
          disabled
        />
      </CFormField>
    </div>
  )
}

Reverse layout

The reverse layout exists only on the deprecated <CFormCheck> — its reverse property places the control after the label.

import React from 'react'
import { CFormCheck } from '@coreui/react'

export const RadioReverseExample = () => {
  return (
    <>
      <CFormCheck reverse type="radio" id="reverseOption1" value="option1" label="Reverse radio" />
      <CFormCheck
        reverse
        type="radio"
        id="reverseOption2"
        value="option2"
        label="Disabled reverse radio"
        disabled
      />
    </>
  )
}

import React from 'react'
import { CFormCheck } from '@coreui/react'

export const RadioReverseExample = () => {
  return (
    <>
      <CFormCheck reverse type="radio" id="reverseOption1" value="option1" label="Reverse radio" />
      <CFormCheck
        reverse
        type="radio"
        id="reverseOption2"
        value="option2"
        label="Disabled reverse radio"
        disabled
      />
    </>
  )
}

Radios without labels

You can omit visual labels, but make sure to provide accessible names using aria-label for screen readers.

import React from 'react'
import { CRadio } from '@coreui/react'

export const RadioWithoutLabelsExample = () => {
  return <CRadio name="radioNoLabel" id="radioNoLabel1" value="" aria-label="..." />
}

import React from 'react'
import { CRadio } from '@coreui/react'

export const RadioWithoutLabelsExample = () => {
  return <CRadio name="radioNoLabel" id="radioNoLabel1" value="" aria-label="..." />
}

Radio toggle buttons

Turn your radios into button-like toggles using the button prop. These can also be grouped using a button group component.

import React from 'react'
import { CFormCheck } from '@coreui/react'

export const RadioToggleButtonsExample = () => {
  return (
    <>
      <CFormCheck
        button={{ color: 'secondary' }}
        type="radio"
        name="options"
        id="option1"
        autoComplete="off"
        label="Checked"
        defaultChecked
      />
      <CFormCheck
        button={{ color: 'secondary' }}
        type="radio"
        name="options"
        id="option2"
        autoComplete="off"
        label="Radio"
      />
      <CFormCheck
        button={{ color: 'secondary' }}
        type="radio"
        name="options"
        id="option3"
        autoComplete="off"
        label="Radio"
        disabled
      />
      <CFormCheck
        button={{ color: 'secondary' }}
        type="radio"
        name="options"
        id="option4"
        autoComplete="off"
        label="Radio"
      />
    </>
  )
}

import React from 'react'
import { CFormCheck } from '@coreui/react'

export const RadioToggleButtonsExample = () => {
  return (
    <>
      <CFormCheck
        button={{ color: 'secondary' }}
        type="radio"
        name="options"
        id="option1"
        autoComplete="off"
        label="Checked"
        defaultChecked
      />
      <CFormCheck
        button={{ color: 'secondary' }}
        type="radio"
        name="options"
        id="option2"
        autoComplete="off"
        label="Radio"
      />
      <CFormCheck
        button={{ color: 'secondary' }}
        type="radio"
        name="options"
        id="option3"
        autoComplete="off"
        label="Radio"
        disabled
      />
      <CFormCheck
        button={{ color: 'secondary' }}
        type="radio"
        name="options"
        id="option4"
        autoComplete="off"
        label="Radio"
      />
    </>
  )
}

Outlined toggle styles

You can apply outlined styles to toggle radios using Bootstrap’s button variant system.

import React from 'react'
import { CFormCheck } from '@coreui/react'

export const RadioToggleButtonsOutlinedStylesExample = () => {
  return (
    <>
      <CFormCheck
        button={{ color: 'success', variant: 'outline' }}
        type="radio"
        name="options-outlined"
        id="success-outlined"
        autoComplete="off"
        label="Radio"
        defaultChecked
      />
      <CFormCheck
        button={{ color: 'danger', variant: 'outline' }}
        type="radio"
        name="options-outlined"
        id="danger-outlined"
        autoComplete="off"
        label="Radio"
      />
    </>
  )
}

import React from 'react'
import { CFormCheck } from '@coreui/react'

export const RadioToggleButtonsOutlinedStylesExample = () => {
  return (
    <>
      <CFormCheck
        button={{ color: 'success', variant: 'outline' }}
        type="radio"
        name="options-outlined"
        id="success-outlined"
        autoComplete="off"
        label="Radio"
        defaultChecked
      />
      <CFormCheck
        button={{ color: 'danger', variant: 'outline' }}
        type="radio"
        name="options-outlined"
        id="danger-outlined"
        autoComplete="off"
        label="Radio"
      />
    </>
  )
}

API reference

Refer to the API documentation below for a complete list of props supported by the React Bootstrap radio component.