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

knoefel · Accepted Answer · 2021-07-30 16:09:07Z

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.

answered Jul 30, 2021 at 16:09

knoefel

7,0383 gold badges39 silver badges53 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related