Skip to content
Edit this page

Radio buttons

Radio buttons allow the user to select one option from a set.

Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.

Radio buttons should have the most commonly used option selected by default.

RadioGroup is a helpful wrapper used to group Radio components that provides an easier API, and proper keyboard accessibility to the group.

Gender
Gender

labelPlacement start

Standalone Radio Buttons

Radio can also be used standalone, without the wrapper.

Label placement

You can change the placement of the label:

labelPlacement

Customized radios

Here is an example of customizing the component. You can learn more about this in the overrides documentation page.

Gender
<FormControl component="fieldset">
  <FormLabel component="legend">Gender</FormLabel>
  <RadioGroup defaultValue="female" aria-label="gender" name="customized-radios">
    <FormControlLabel value="female" control={<StyledRadio />} label="Female" />
    <FormControlLabel value="male" control={<StyledRadio />} label="Male" />
    <FormControlLabel value="other" control={<StyledRadio />} label="Other" />
    <FormControlLabel
      value="disabled"
      disabled
      control={<StyledRadio />}
      label="(Disabled option)"
    />
  </RadioGroup>
</FormControl>

When to use

Accessibility

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#radiobutton)

  • All form controls should have labels, and this includes radio buttons, checkboxes, and switches. In most cases, this is done by using the <label> element (FormControlLabel).
  • When a label can't be used, it's necessary to add an attribute directly to the input component. In this case, you can apply the additional attribute (e.g. aria-label, aria-labelledby, title) via the inputProps property.
<RadioButton
  value="radioA"
  inputProps={{ 'aria-label': 'Radio A' }}
/>

API