'react-hook-form material-ui (FormControlLabel + Checkbox) using Controller
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"
/>
Solution 1:[1]
From v7, I used this :
<Controller
name='contactAutre'
control={control}
defaultValue={false}
render={({ field }) => (
<FormControlLabel
control={<Checkbox {...field} />}
label='Autre'
/>
)}
/>Solution 2:[2]
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"
/>
Solution 3:[3]
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"
/>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Jossic |
| Solution 2 | Stuart Hallows |
| Solution 3 | Psychopomp |