react-hook-form: MUI RadioGroup - setValue() doesn't update the value

For anyone who came here wondering how to integrate MUI RadioGroup with hook-form here is an example of handling controlled MUI RadioGroup component with react-hook-form

https://codesandbox.io/s/handling-controlled-mui-component-with-react-hook-form-run4z

@karimja here is my previous example with the custom Radio component : https://codesandbox.io/s/quiet-currying-2gy6l

I pretty much copied-paste the MUI Radio component so that it looks almost exactly the same and now I can do whatever I want with it. I hope it helps.

I had problems with 2 MUI components so far:

• Select
• Radio

After spending a few hours trying to make them behave like I needed, creating custom ones seemed to be a good solution for me. But it depends on your use cases of course.

Take a look at this example: https://codesandbox.io/s/react-hook-form-controller-079xx @dandv

Hi @MinaAmrouche,

MUI works differently, the checked prop of the <input/> in the RadioGroup component can only trigger by the user interaction.

From my experience, in order to set the value of the radio group, you have to create a custom component with state to wrap around the RadioGroup component

Thanks @bluebill1049, that example is much simpler and a comprehensive Material UI example with all the controls. I wish I had found it at https://github.com/react-hook-form/react-hook-form/tree/master/examples, would’ve saved me a few hours 😃

going to close this issue @karimja feel free to continue the discussion in here tho. thanks for your help @MinaAmrouche ❤️

Thank you for your answer @chungweileong94. I’ve decided to create my own Radio component based on MUI style and it works just fine. You’re right @bluebill1049, MUI doesn’t support uncontrolled components entirely.