Radio

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

<Radio />

Props

Prop	Type	Default	Description
checked	bool		If true, the component is checked.
checkedIcon	node		The icon to display when the component is checked.
classes	object		Override or extend the styles applied to the component. See CSS API below for more details.
disabled	bool		If true, the radio will be disabled.
disableRipple	bool		If true, the ripple effect will be disabled.
icon	node		The icon to display when the component is unchecked.
id	string		The id of the input element.
inputProps	object		Attributes applied to the input element.
inputRef	ref		Pass a ref to the input element.
name	string		Name attribute of the input element.
onChange	func		Callback fired when the state is changed. Signature: function(event: object) => void event: The event source of the callback. You can pull out the new value by accessing event.target.value (string). You can pull out the new checked state by accessing event.target.checked (boolean).
required	bool		If true, the input element will be required.
size	'medium' \| 'small'	'medium'	The size of the radio. small is equivalent to the dense radio styling.
value	any		The value of the component. The DOM API casts this to a string.
subtext	string		The optional subtext line that can be passed to the component

The ref is forwarded to the root element.

Any other props supplied will be provided to the root element (IconButton).

Examples

Disabled Radio

() => {
  const [value, setValue] = React.useState('disabled1');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <FormControl component="fieldset">
      <FormLabel component="legend">Disabled Options</FormLabel>
      <RadioGroup
        aria-label="disabled options"
        name="disabled options"
        value={value}
        onChange={handleChange}
      >
        <FormControlLabel
          value="disabled1"
          disabled
          control={<Radio />}
          tabIndex={-1}
          label="Selected disabled option"
        />
        <FormControlLabel
          value="disabled2"
          disabled
          control={<Radio />}
          tabIndex={-1}
          label="Unselected disabled option"
        />
      </RadioGroup>
    </FormControl>
  );
};

RadioGroup

() => {
  const [value, setValue] = React.useState('female');
  const handleChange = (event) => {
    setValue(event.target.value);
  };
   const handleKeyDown = (event) => {
       const labels = Array.from(event.currentTarget.querySelectorAll('input[type="radio"]:not(:disabled)')).map(radioInput => radioInput.closest('label'));
       const currentIndex = labels.findIndex((label) => label === event.target.closest('label'));
        const moveFocus = (newIndex) => {
            labels[newIndex].focus();
            const radioInput = labels[newIndex].querySelector('input');
            if (radioInput) {
                setValue(radioInput.value);
            }
            event.preventDefault();
        };
       if (event.key === 'ArrowDown' || event.key === 'ArrowRight' ) {
           const nextIndex = (currentIndex + 1) % labels.length;
           moveFocus(nextIndex);
       }
       else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
           const prevIndex = (currentIndex - 1 + labels.length) % labels.length;
           moveFocus(prevIndex);
       }
    };
  return (
    <FormControl component="fieldset">
      <FormLabel component="legend">Gender</FormLabel>
      <RadioGroup
        aria-label="gender"
        name="gender1"
        value={value}
        onChange={handleChange}
        onKeyDown={handleKeyDown}
      >
        <FormControlLabel value="female" tabIndex={value === 'female' ? 0 : -1} control={<Radio tabIndex={-1}/>} label="Female" />
        <FormControlLabel value="male" tabIndex={value === 'male' ? 0 : -1}  control={<Radio  tabIndex={-1}/>} label="Male" subtext="optional text" />
        <FormControlLabel value="other" tabIndex={value === 'other' ? 0 : -1} control={<Radio tabIndex={-1}/>} label="Other"/>
        <FormControlLabel
          value="disabled"
          tabIndex={-1}
          disabled
          control={<Radio />}
          label="(Disabled option)"
        />
      </RadioGroup>
    </FormControl>
  );
};

Standalone Radio buttons

() => {
  const [selectedValue, setSelectedValue] = React.useState('a');

  const handleChange = (event) => {
    setSelectedValue(event.target.value);
  };

  return (
    <div>
      <Radio
        checked={selectedValue === 'a'}
        onChange={handleChange}
        value="a"
        name="radio-button-demo"
        inputProps={{ 'aria-label': 'A' }}
      />
      <Radio
        checked={selectedValue === 'b'}
        onChange={handleChange}
        value="b"
        name="radio-button-demo"
        inputProps={{ 'aria-label': 'B' }}
      />
      <Radio
        checked={selectedValue === 'c'}
        onChange={handleChange}
        value="c"
        name="radio-button-demo"
        inputProps={{ 'aria-label': 'C' }}
      />
      <Radio
        checked={selectedValue === 'd'}
        onChange={handleChange}
        value="d"
        name="radio-button-demo"
        inputProps={{ 'aria-label': 'D' }}
      />
      <Radio
        checked={selectedValue === 'e'}
        onChange={handleChange}
        value="e"
        name="radio-button-demo"
        inputProps={{ 'aria-label': 'E' }}
        size="small"
      />
    </div>
  );
};