---
title: React Radio Components
name: Radio
description: Create consistent cross-browser and cross-device radios with our React radio component.
route: /forms/radio/
other_frameworks: radio
---

## Approach

Browser default radios are replaced with the help of `<CFormCheck type="radio">`. Radios are for selecting one option from many.

## Radios

<ExampleSnippet component="RadioExample" componentName="React Form Radio" />

### Disabled

Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input's state.

<ExampleSnippet component="RadioDisabledExample" componentName="React Form Radio" />

## Default (stacked)

By default, any number of radios that are immediate sibling will be vertically stacked and appropriately spaced.

<ExampleSnippet component="RadioStackedExample" componentName="React Form Radio" />

## Inline

Group radios on the same horizontal row by adding `inline` boolean property to any `<CFormCheck radio>`.

<ExampleSnippet component="RadioInlineExample" componentName="React Form Radio" />

## Reverse 

Put your radios on the opposite side by adding `reverse` boolean property.

<ExampleSnippet component="RadioReverseExample" componentName="React Form Radio" />

## Without labels

Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`).

<ExampleSnippet component="RadioWithoutLabelsExample" componentName="React Form Radio" />

## Radio toggle buttons

Create button-like radio buttons by using `button` boolean property on the `<CFormCheck radio>` component. These toggle buttons can further be grouped in a button group if needed.

<ExampleSnippet component="RadioToggleButtonsExample" componentName="React Form Radio" />

### Outlined styles

Different variants of button, such at the various outlined styles, are supported.

<ExampleSnippet component="RadioToggleButtonsOutlinedStylesExample" componentName="React Form Radio" />

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CFormCheck /&gt;](./api/#cformcheck)
