When using react-hook-form with MUI switch, the switch doesn't display the initial value on page load, even though the value is set to true. It seems to be a display issue though, because submitting the form with buttons untouched yields true for the switches that have a true value defined. Also, clicking these buttons (showing false) once does nothing (they stay on the left), clicking them a second time will actually toggle them on again.

Setting initial values using hook (works for all other field types):

useEffect(() => {
  if (userProfile) {
    setValue('firstname', userProfile.firstname);
    setValue('lastname', userProfile.lastname);
    setValue('show_profile', userProfile.show_profile || false);
  }
}, [userProfile]);

The switch is implemented like this:

<FormControlLabel
    control={<Switch {...register('show_profile')} />}
    label="Profil öffentlich (beinhaltet Vor- und Nachname)"
/>

This in turn is a checkbox ponent that works perfectly fine:

<FormControlLabel
    control={
      <Checkbox
        {...register('steuerbescheinigung')}
        name="steuerbescheinigung"
      />
    }
    label="Steuerbescheinigung benötigt?"
  />

How to use react-hook-form with MUI Switch and set initial values?

When using react-hook-form with MUI switch, the switch doesn't display the initial value on page load, even though the value is set to true. It seems to be a display issue though, because submitting the form with buttons untouched yields true for the switches that have a true value defined. Also, clicking these buttons (showing false) once does nothing (they stay on the left), clicking them a second time will actually toggle them on again.

Setting initial values using hook (works for all other field types):

useEffect(() => {
  if (userProfile) {
    setValue('firstname', userProfile.firstname);
    setValue('lastname', userProfile.lastname);
    setValue('show_profile', userProfile.show_profile || false);
  }
}, [userProfile]);

The switch is implemented like this:

<FormControlLabel
    control={<Switch {...register('show_profile')} />}
    label="Profil öffentlich (beinhaltet Vor- und Nachname)"
/>

This in turn is a checkbox ponent that works perfectly fine:

<FormControlLabel
    control={
      <Checkbox
        {...register('steuerbescheinigung')}
        name="steuerbescheinigung"
      />
    }
    label="Steuerbescheinigung benötigt?"
  />

How to use react-hook-form with MUI Switch and set initial values?

• javascript
• reactjs
• material-ui
• react-hook-form

1 Answer 1

According to documentation.

React Hook Form embraces uncontrolled ponents and native inputs, however it's hard to avoid working with external controlled ponent such as React-Select, AntD and MUI. This wrapper ponent will make it easier for you to work with them.

You need to use the Controller ponent from react-hook-form to wrap your Switch ponent and pass the value and onChange props from the field object.

For example:

<Controller
  name="show_profile"
  control={control}
  render={({ field: { onChange, value } }) => (
    <FormControlLabel
      control={<Switch checked={value} onChange={onChange} />}
      label="Profil öffentlich (beinhaltet Vor- und Nachname)"
    />
  )}
/>;

You can see the whole example here.