How to make a controlled input, when using a controller?

[sabbiu]

Follow these steps to understand what I am trying to achieve.

• Open code sandbox demo
• All three inputs (switch, checkbox and input) has same name property.
• Check the Input Labelled MUI Checkbox
• You can observe its value reflected down in input field but not in switch.

How can I make sure for it to be reflected in both of those fields?

[bluebill1049]

checkbox is checked right? not value

[bluebill1049]

what's not working?

[bluebill1049]

there is an example in the doc as well: https://codesandbox.io/s/react-hook-form-v6-controller-qsd8r?file=/src/Mui.js

[sabbiu]

When I turn on the MUI Checkbox, I want MUI Switch also to turn on. As they both share the same name.

[bluebill1049]

Important: name is required and unique (can not start with a number or use number as key name). Input name also supports dot and bracket syntax, which allows you to easily create nested form fields.

https://react-hook-form.com/api#register

read the doc, name should be unique.

[sabbiu]

Totally missed that out. BTW, I was under the impression that we can create multiple components with the same name, and the same value gets reflected in all of them.

Thanks for your help

[sabbiu]

@bluebill1049 I was able to create a hack, to fulfill my use case. IDK, if this is performant solution or not. If you can take a look into it, it would be awesome. Thanks
Codesandbox Link

[sabbiu]

This is what I wanted to achieve.

Before

After

[bluebill1049]

i would use useWatch instead

[sabbiu]

Thanks! It works. Here is the final solution, codesandbox