Radio

Radio buttons are used when you have a group of mutually exclusive choices and only one selection from the group is allowed.

Sizes

Radios are available in three sizes to cater for the diverse range of use cases and devices that our business uses. By default, the medium radio is used.

Small

Medium

Large

<RadioButton name="size" size="small" inputProps={{ defaultChecked: true }}>
  Small
</RadioButton>
<RadioButton name="size" size="medium">Medium</RadioButton>
<RadioButton name="size" size="large">Large</RadioButton>

Selection

Radios can be checked by adding defaultChecked or checked to the inputProps. Use defaultChecked for uncontrolled radios and checked for controlled radios.

Small

Medium

Large

<RadioButton size="small" inputProps={{ defaultChecked: true }}>
  Small
</RadioButton>
<RadioButton size="medium" inputProps={{ defaultChecked: true }}>
  Medium
</RadioButton>
<RadioButton size="large" inputProps={{ defaultChecked: true }}>
  Large
</RadioButton>

Colors

Radios are available in two colors: primary and neutral. The default color is the primary color.

Primary Checked

Primary Unchecked

Neutral Checked

Neutral Unchecked

<RadioButton name="primary" color="primary" inputProps={{ defaultChecked: true }}>
  Primary Checked
</RadioButton>
<RadioButton name="neutral" color="neutral" inputProps={{ defaultChecked: true }}>
  Primary Checked
</RadioButton>
// ...

Errors

Radios can also have an error state to show that a selection needs to be made in order to move forward, or that a selection that was made is invalid.

Primary Checked

Primary Unchecked

Neutral Checked

Neutral Unchecked

<RadioButton name="primary-error" inputProps={{ defaultChecked: true }} error>
  Primary Checked
</RadioButton>
// ...

Disabled

Radios can also have a disabled state.

Primary Checked

Primary Unchecked

Neutral Checked

Neutral Unchecked

<RadioButton name="primary-disabled" inputProps={{ defaultChecked: true }} disabled>
  Primary Checked
</RadioButton>
// ...

Label

You can set label for a radio button by using label attribute. When label attribute is set, the text of the button is set to the same.

Radio Button

<RadioButton inputProps={{ defaultChecked: true }} label="Radio Button" />

Custom labels

Radios accepts any component as its label. Make sure to use items with clear textual labels, or elements that are self explanatory in the given context.

Option 1

This is some placeholder help text.

<RadioButton inputProps={{ defaultChecked: true }}>
  <div>
    <Typography>Option 1</Typography>
    <Typography component="caption-1" classes="text-bluegrey-500">
      This is some placeholder help text.
    </Typography>
  </div>
</RadioButton>

<input> attributes

You can apply any standard <input> attributes (e.g., id, name, required, etc.) to the inner <input type="radio"> of the RadioButton component by using the inputProps prop.

<RadioButton inputProps={{
    id: "radio-button-1",
    name: "radio-button-1",
    required: true
  }}
/>

Radio Group

RadioGroup is a helpful wrapper used to group radio elements. Make sure that RadioGroup component has a name attribute.

Radio 1Radio 2Radio 3

<RadioGroup name="radioGroup1" defaultValue="radio1">
  <RadioButton inputProps={{ value: "radio1" }}>Radio 1</RadioButton>
  <RadioButton inputProps={{ value: "radio2" }}>Radio 2</RadioButton>
  <RadioButton inputProps={{ value: "radio3" }}>Radio 3</RadioButton>
</RadioGroup>

Sizes

RadioGroup are available in three sizes that correspond to the different bottom margin values and size of their child elements. By default, the medium size is used.

Small

Radio 1Radio 2Radio 3

Medium

Radio 1Radio 2Radio 3

Large

Radio 1Radio 2Radio 3

<RadioGroup size="small" name="radioGroupSizeSmall" defaultValue="radio1">
  <RadioButton inputProps={{ value: "radio1" }}>Radio 1</RadioButton>
  <RadioButton inputProps={{ value: "radio2" }}>Radio 2</RadioButton>
  <RadioButton inputProps={{ value: "radio3" }}>Radio 3</RadioButton>
</RadioGroup>
// ...

Value

You can set a default value for a radio button group by using defaultValue attribute. And you can also control value of this group by using value attribute

Radio 1Radio 2Radio 3

<RadioGroup defaultValue="radio1" name="radioGroup">
  <RadioButton inputProps={{ value: "radio1" }}>Radio 1</RadioButton>
  <RadioButton inputProps={{ value: "radio2" }}>Radio 2</RadioButton>
  <RadioButton inputProps={{ value: "radio3" }}>Radio 3</RadioButton>
</RadioGroup>

API

Radio

The Radio component accepts all the props a standard <label> does in React (HTML, ARIA, data attributes, event handlers, and children). Its props are typed as React.LabelHTMLAttributes<HTMLLabelElement>. See more about supported HTML props in React's documentation.

Loading API documentation...

RadioGroup

The RadioGroup component accepts all the props a standard <div> does in React (HTML, ARIA, data attributes, event handlers, and children). Its props are typed as React.HTMLAttributes<HTMLDivElement>. See more about supported HTML props in React's documentation.

Loading API documentation...