react-hook-form material-ui (FormControlLabel + Checkbox) using Controller

Question

to use Material-ui in react-hook-form you should use <Controller and the method render instead of "as = {xy-control}" Also should not mix controller and inputRef = {register}. A single control is also no problem. But there is a compound control in Material-ui. "FormControlLabel + CheckBox" how do you integrate this control in the controller. All my attempts have failed.

This is how it works but I would like the FormControlLaben to be enclosed by the controller. Does somebody has any idea?

                 <Controller
                    name="password"
                    control={control}
                    defaultValue={""}
                    render={(props) => <TextField {...props}
                                                  variant="outlined"
                                                  margin="normal"
                                                  required
                                                  fullWidth
                                                  label="Password"
                                                  type="password"
                                                  id="password"
                                                  autoComplete="current-password"
                    />}
                />

                <FormControlLabel
                    control={
                        <Checkbox
                            inputRef={register}
                            name="remember"
                        />
                    }
                    label="remember"
                />


{/*That works, but it requires an OnChange. Why can't the controller bind it?*/}
                <FormControlLabel
                    control={
                        <Controller
                            name={"remember2"}
                            control={control}
                            render={(props) => (
                                <Checkbox
                                    {...props}
                                    onChange={(e) => props.onChange(e.target.checked)}

                                />
                            )}
                        />
                    }
                    label="remember"
                />

Psychopomp · Accepted Answer · 2022-05-18 05:23:20Z

5

this was enough for me w/ Mui 5 & RHF 7

const { watch, register } = useForm<{saveEmail: boolean}>({
  defaultValues: { saveEmail: true },
});

...

<FormControlLabel
  control={
    <Checkbox {...register('saveEmail')} checked={watch('saveEmail')} />
  }
  label="save email"
/>

answered May 18, 2022 at 5:23

Psychopomp

3274 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mayron Over a year ago

Using watch worked perfectly ty. I most upvoted answer didn't work for me. I don't need to use Controller with your answer eacher. Much simpler!

wutzebaer Over a year ago

Nice this also works for select to get rid of the controller tag

Stuart Hallows · Accepted Answer · 2021-02-17 11:03:47Z

3

Here's how I did it

<FormControlLabel
  control={
    <Controller
      control={control}
      inputRef={register}
      name='controlName'
      render={({onChange, value}) => (
        <Checkbox
          onChange={e => onChange(e.target.checked)}
          checked={value}
        />
      )}
    />
  }
  label="This is a label"
/>

answered Feb 17, 2021 at 11:03

Stuart Hallows

8,9735 gold badges47 silver badges57 bronze badges

Comments

Jossic · Accepted Answer · 2021-06-11 14:16:11Z

3

From v7, I used this :

    <Controller
        name='contactAutre'
        control={control}
        defaultValue={false}
        render={({ field }) => (
            <FormControlLabel
                control={<Checkbox {...field} />}
                label='Autre'
            />
        )}
    />

answered Jun 11, 2021 at 14:16

Jossic

717 bronze badges

Comments

DINA TAKLIT · Accepted Answer · 2022-09-08 21:15:24Z

1

Another way to make things more controlled:

<FormControlLabel
label="label here"
control={
    <Controller
    name="isSeparatedDelivery"
    control={control}
    render={({ field: { onChange, value } }) => (
        <Checkbox
        checked={value}
        onChange={(e) => onChange(e.target.checked)}
        />
    )}
    />
}
/>

or

<Controller
control={control}
name="selected"
render={({ field: { onChange, value } }) => (
  <FormControlLabel
    control={
      <Checkbox
        label="Sélectionner la question"
        checked={value}
        onChange={onChange}
      />
    }
    label="Sélectionner la question"
  />
)}
/>

edited Sep 8, 2022 at 21:15

answered Sep 8, 2022 at 21:02

DINA TAKLIT

8,50410 gold badges84 silver badges92 bronze badges

Comments

rottitime · Accepted Answer · 2022-07-06 17:39:21Z

0

Credit to Leo Roese for his example for Textfield. However you can apply the same logic for Checkboxes but slightly tweak.

const { control, formState: { errors } } = useForm()

<Controller
    name="privacyAccept"
    control={control}
    render={({ field }) => (
    <>
        <FormControlLabel
        control={<Checkbox {...field} />}
        label="I agree to the privacy policy"
        />
        {errors.privacyAccept && (
        <FormHelperText error>{errors.privacyAccept.message}</FormHelperText>
        )}
    </>
    )}
/>

answered Jul 6, 2022 at 17:39

rottitime

2,4972 gold badges23 silver badges37 bronze badges

Collectives™ on Stack Overflow

react-hook-form material-ui (FormControlLabel + Checkbox) using Controller

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related