Skip to main content
Radio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.

​
Import

import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';

​
Basic Usage

import * as React from 'react';
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';

export default function ControlledRadioButtonsGroup() {
  const [value, setValue] = React.useState('female');

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setValue((event.target as HTMLInputElement).value);
  };

  return (
    <FormControl>
      <FormLabel id="demo-controlled-radio-buttons-group">Gender</FormLabel>
      <RadioGroup
        aria-labelledby="demo-controlled-radio-buttons-group"
        name="controlled-radio-buttons-group"
        value={value}
        onChange={handleChange}
      >
        <FormControlLabel value="female" control={<Radio />} label="Female" />
        <FormControlLabel value="male" control={<Radio />} label="Male" />
      </RadioGroup>
    </FormControl>
  );
}

​
Radio Props

​
color
'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'default'
default:"'primary'"
The color of the component. Supports both default and custom theme colors.
​
size
'small' | 'medium'
default:"'medium'"
The size of the component. small is equivalent to the dense radio styling.
​
disabled
boolean
If true, the component is disabled.
​
checkedIcon
ReactNode
The icon to display when the component is checked. Defaults to <RadioButtonIcon checked />.
​
icon
ReactNode
The icon to display when the component is unchecked. Defaults to <RadioButtonIcon />.
​
sx
SxProps<Theme>
The system prop that allows defining system overrides as well as additional CSS styles.

​
RadioGroup Props

​
value
any
Value of the selected radio button. The DOM API casts this to a string.
​
defaultValue
any
The default value. Use when the component is not controlled.
​
name
string
The name used to reference the value of the control. If you don’t provide this prop, it falls back to a randomly generated name.
​
onChange
(event: React.ChangeEvent<HTMLInputElement>, value: string) => void
Callback fired when a radio button is selected. You can pull out the new value by accessing event.target.value (string).

​
API Reference

Build docs developers (and LLMs) love

Get started for freeTalk to us