Uncheck Radio buttons with Material UI

Question

I wish to be able to uncheck radio buttons, Idea is like this: if I click on some radio button, it is going to be checked, if I click on another field, this another field is going to be checked instead BUT if I click on field which is already checked, I wish to uncheck it so all fields are empty. I tried to catch the moment of being checked or unchecked but seems like opposite to checkboxes, Radio buttons don't have this field. does anyone has idea how to achieve that?

setTests = (key, e) => {
    console.log(e.checked)
    if (e.checked) {
      // this.setState({[key]: null})
      console.log('works')
    }
  }
RadioGroup
            value={this.state.test_mode}
            style={{ display: "block" }}
            onChange={e => this.setTests({ "test_mode", e.target })}
          >
            <FormControlLabel value="before" control={<Radio color="primary"/>} label="before tests" />
            <FormControlLabel value="progressing" control={<Radio color="primary"/>} label="progressing" />
            <FormControlLabel value="done" control={<Radio color="primary"/>} label="done" />

          </RadioGroup>

Hammurabi

Yah, with radio buttons, you can't uncheck a radio button by clicking on it. – Ylem

Answer 1

Below is an example of how to do this. Instead of using the onChange of the RadioGroup, you use the onClick event of the Radio. If the new value matches the current value in state, then set the value to empty string.

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Radio from "@material-ui/core/Radio";
import RadioGroup from "@material-ui/core/RadioGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import FormControl from "@material-ui/core/FormControl";
import FormLabel from "@material-ui/core/FormLabel";

const useStyles = makeStyles(theme => ({
  root: {
    display: "flex"
  },
  formControl: {
    margin: theme.spacing(3)
  },
  group: {
    margin: theme.spacing(1, 0)
  }
}));

export default function RadioButtonsGroup() {
  const classes = useStyles();
  const [value, setValue] = React.useState("female");

  function handleClick(event) {
    if (event.target.value === value) {
      setValue("");
    } else {
      setValue(event.target.value);
    }
  }

  return (
    <div className={classes.root}>
      <FormControl component="fieldset" className={classes.formControl}>
        <FormLabel component="legend">Gender</FormLabel>
        <RadioGroup
          aria-label="gender"
          name="gender1"
          className={classes.group}
          value={value}
        >
          <FormControlLabel
            value="female"
            control={<Radio onClick={handleClick} />}
            label="Female"
          />
          <FormControlLabel
            value="male"
            control={<Radio onClick={handleClick} />}
            label="Male"
          />
          <FormControlLabel
            value="other"
            control={<Radio onClick={handleClick} />}
            label="Other"
          />
        </RadioGroup>
      </FormControl>
    </div>
  );
}

Pharmacopoeia

well this only works if there is a default value set on the state. – Fylfot

@VictorCallegari Correct. If the default value is "undefined", MUI will think the radio group is uncontrolled at the first render, but then it will complain when the value changes to something concrete. You need to trick MUI into realization that the radio group is actually controlled, as it is explained in this answer: stackoverflow.com/a/58955293 – Stuart