We are struggling to have a default value automatically set on page load for a RadioGroup. The documentation (/) indicates that there is a defaultValue property, but it does not seem to take effect.

We played around with this in the Sandbox demo here and were unable to get it working:

The code taken from the Sandbox demo:

  <FormControl ponent="fieldset" className={classes.formControl}>
    <FormLabel ponent="legend">Gender</FormLabel>
    <RadioGroup
      aria-label="Gender"
      name="gender1"
      className={classes.group}
      value={value}
      onChange={handleChange}
      defaultValue="male">
      <FormControlLabel value="female" control={<Radio />} label="Female" />
      <FormControlLabel value="male" control={<Radio />} label="Male" />
      <FormControlLabel value="other" control={<Radio />} label="Other" />
      <FormControlLabel
        value="disabled"
        disabled
        control={<Radio />}
        label="(Disabled option)"
      />
    </RadioGroup>
  </FormControl>

We played around with this code but were unable to get the "male" radio button to be selected on page load. Is there another property we can set for the default?

FOLLOW UP QUESTION: we are using React 16.2. Is there a way to set the default value in that version of React?

We are struggling to have a default value automatically set on page load for a RadioGroup. The documentation (https://material-ui./api/radio-group/) indicates that there is a defaultValue property, but it does not seem to take effect.

We played around with this in the Sandbox demo here and were unable to get it working: https://codesandbox.io/s/material-demo-8xgmd

The code taken from the Sandbox demo:

  <FormControl ponent="fieldset" className={classes.formControl}>
    <FormLabel ponent="legend">Gender</FormLabel>
    <RadioGroup
      aria-label="Gender"
      name="gender1"
      className={classes.group}
      value={value}
      onChange={handleChange}
      defaultValue="male">
      <FormControlLabel value="female" control={<Radio />} label="Female" />
      <FormControlLabel value="male" control={<Radio />} label="Male" />
      <FormControlLabel value="other" control={<Radio />} label="Other" />
      <FormControlLabel
        value="disabled"
        disabled
        control={<Radio />}
        label="(Disabled option)"
      />
    </RadioGroup>
  </FormControl>

We played around with this code but were unable to get the "male" radio button to be selected on page load. Is there another property we can set for the default?

FOLLOW UP QUESTION: we are using React 16.2. Is there a way to set the default value in that version of React?

• javascript
• material-ui

• You can just set the checked property to true for male and to false for female. – John Krakov Commented May 24, 2019 at 22:18
• @JohnKrakov - won't work for a nested React Component that is controlled through React rather than through DOM properties. – Randy Casburn Commented May 24, 2019 at 22:23
• value={value || 'male'} ? – sunn0 Commented Apr 14, 2021 at 21:15
• I have experienced many times with Mateiral UI things not working because of the intial render of a ponent contained a non valid value, ensure you never pass an undefined value to the RadioGroup field including before the user actually sees the ponent. – Mayer Spitz Commented Jul 27, 2021 at 5:13

1 Answer 1

If using React Version that Supports Hooks (> 16.8) (given stackblitz in question)

You have to use the useState() method the change the internal state of the React (Material Design) ponent. This tells MD RadioGroup ponent which radio button you want to be the default by creating a state property named value which is set to male. Then, the value property is used as the value attribute "value" - and that sets the default.

It is a simple change to line 24 of the sandbox referenced:

Change:

const [value, setValue] = React.useState("female");

To:

const [value, setValue] = React.useState("male");

If using React Version without Hooks (< 16.8)

You'll need to rewrite your function as a React Component Class using standard a state variable. Unfortunately, the version of Material Design is also an issue in this case since Material Design calls a React method that doesn't exist in the earlier version of React (createContext()). Downgrade Material Design to v1.0.0 if you are not using React 16.8.

And relevant code:

class RadioButtonsGroup extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.classes = {
      root: {
        display: "flex"
      },
      formControl: {
        margin: 13
      },
      group: {
        margin: 10
      }
    };
    this.state = {
      value: "male"
    };
  }
  handleChange(event) {
    this.setState({ value: event.target.value });
  }
  render() {
    return (
      <div className={this.classes.root}>
        <FormControl ponent="fieldset" className={this.classes.formControl}>
          <FormLabel ponent="legend">Gender</FormLabel>
          <RadioGroup
            aria-label="Gender"
            name="gender1"
            className={this.classes.group}
            value={this.state.value}
            onChange={this.handleChange}
          >
            <FormControlLabel
              value="female"
              control={<Radio />}
              label="Female"
            />
            <FormControlLabel value="male" control={<Radio />} label="Male" />
            <FormControlLabel value="other" control={<Radio />} label="Other" />
            <FormControlLabel
              value="disabled"
              disabled
              control={<Radio />}
              label="(Disabled option)"
            />
          </RadioGroup>
        </FormControl>
        <FormControl ponent="fieldset" className={this.classes.formControl}>
          <FormLabel ponent="legend">Gender</FormLabel>
          <RadioGroup
            aria-label="gender"
            name="gender2"
            className={this.classes.group}
            value={this.state.value}
            onChange={this.handleChange}
          >
            <FormControlLabel
              value="female"
              control={<Radio color="primary" />}
              label="Female"
              labelPlacement="start"
            />
            <FormControlLabel
              value="male"
              control={<Radio color="primary" />}
              label="Male"
              labelPlacement="start"
            />
            <FormControlLabel
              value="other"
              control={<Radio color="primary" />}
              label="Other"
              labelPlacement="start"
            />
            <FormControlLabel
              value="disabled"
              disabled
              control={<Radio />}
              label="(Disabled option)"
              labelPlacement="start"
            />
          </RadioGroup>
          <FormHelperText>labelPlacement start</FormHelperText>
        </FormControl>
      </div>
    );
  }
}