Radio's allow the user to select at most one option in a group.

Props from Radio.Group that also appear in Radio will be overridden by Radio.Group's. In general, you should never use Radio without a Radio.Group.

For information on Radio and Form style and usage guidelines, check out Form Selection Design Guidelines and Form Design Guidelines.

Example

A normal example of a vertical group of Radio components.

 
BlueRedPurpleGreen
 
<Radio.Group 
  vertical 
  ml="24px"
  name="colors"
>
  <Radio id="blue" value="blue">
    Blue
  </Radio>
  <Radio defaultChecked id="red" value="red">
    Red
  </Radio>
  <Radio id="purple" value="purple">
    Purple
  </Radio>
  <Radio id="green" value="green">
    Green
  </Radio>
</Radio.Group>
<Radio.Group 
  vertical 
  ml="24px"
  name="colors"
>
  <Radio id="blue" value="blue">
    Blue
  </Radio>
  <Radio defaultChecked id="red" value="red">
    Red
  </Radio>
  <Radio id="purple" value="purple">
    Purple
  </Radio>
  <Radio id="green" value="green">
    Green
  </Radio>
</Radio.Group>

Using State

Radio comes with onChange and value event props for you to handle in any way. Here's an example of it with React Hooks.

const [value, setValue] = useState('female');
const handleChange = (e) => {
  setValue(e.target.value);
};
return (
  <Radio.Group
    marginTop="50px"
    name="gender"
    onChange={handleChange}
    value={value}
  >
    <Radio id="male" value="male">
      Male
    </Radio>
    <Radio id="female" value="female">
      Female
    </Radio>
    <Radio id="other" value="other">
      Other
    </Radio>
  </Radio.Group>
)

Error Handling

Use the error prop in Radio to define the error state of that Radio Component. You may choose between default, error, warning, and success. Note the style change when the Radio is selected.

 
SuccessErrorWarningDefault
 
<Radio.Group
  defaultValue="red2"
  vertical
  ml="24px"
  name="colorsError"
>
  <Radio error="success" id="blue2" value="blue2">
    Success
  </Radio>
  <Radio error="error" id="red2" value="red2">
    Error
  </Radio>
  <Radio error="warning" id="purple2" value="purple2">
    Warning
  </Radio>
  <Radio error="default" id="green2" value="green2">
    Default
  </Radio>
</Radio.Group>
<Radio.Group
  defaultValue="red2"
  vertical
  ml="24px"
  name="colorsError"
>
  <Radio error="success" id="blue2" value="blue2">
    Success
  </Radio>
  <Radio error="error" id="red2" value="red2">
    Error
  </Radio>
  <Radio error="warning" id="purple2" value="purple2">
    Warning
  </Radio>
  <Radio error="default" id="green2" value="green2">
    Default
  </Radio>
</Radio.Group>

Disabled

You can disable individual radios with the disabled prop. The same applies to entire Radio Group with the disabled prop in Radio.Group.

Try adding it to Radio.Group.

 
BlueRedPurpleGreen
 
<Radio.Group 
  vertical 
  ml="24px" 
  name="colors-disabled"
>
  <Radio id="blue4" value="blue4">
    Blue
  </Radio>
  <Radio defaultChecked id="red4" value="red4">
    Red
  </Radio>
  <Radio id="purple4" value="purple4">
    Purple
  </Radio>
  <Radio disabled id="green4" value="green4">
    Green
  </Radio>
</Radio.Group>
<Radio.Group 
  vertical 
  ml="24px" 
  name="colors-disabled"
>
  <Radio id="blue4" value="blue4">
    Blue
  </Radio>
  <Radio defaultChecked id="red4" value="red4">
    Red
  </Radio>
  <Radio id="purple4" value="purple4">
    Purple
  </Radio>
  <Radio disabled id="green4" value="green4">
    Green
  </Radio>
</Radio.Group>

Common Props

Radio includes COMMON common props. Radio.Group includes COMMON, FLEX, and BORDER props. Read Common Props for details and API. These common props will override component props such as the color.

Radio Component Props

Radio.Group Component Props