Checkbox component not working. (MATERIAL UI, REACT-HOOK-FORM

Question

I'm using a material checkbox but it doesn't return true or false. This is my code:

 <FormControlLabel
      control={
        <Checkbox defaultValue={data.hasPhone} defaultChecked={data.hasPhone} color="primary" {...register("hasPhone")}/>            
      }
      label="Do you have a phone"
    />

{hasPhone && (
              <Input
                {...register("phoneNumber")}
                id="phoneNumber"
                type="tel"
                label="Cellulare"
                name="phoneNumber"
              />
            )}

When the checkbox is true, we have a condition, "hasPhone" that open another input field. If i use a my checkbox like this:

<input type="checkbox" placeholder="Developer" {...register("hasPhone")} />

in above case the condition working correctly.

Can you help me please? thx

Answer 1

The reason why it is working for your "hasPhone" <input /> is that it is a native form element in contrast to the Material UI <Checkbox /> component, which is an external controlled input.

So for native form elements you can use register , but for external controlled components you have to use RHF's <Controller /> component. Check this section in documentation for more infos.