Help integrating Chakra-UI custom radio with RHF

[paambaati]

X-posting from chakra-ui/chakra-ui#3724

I'm trying to build a Chakra-UI custom radio group component that also needs to submit values to RHF v6.

I have a CodeSandbox forked from the RHF example in the Guides section, and I'm having trouble getting a custom radio group to register with RHF.

https://codesandbox.io/s/chakra-ui-react-hook-form-custom-radio-2un9h?file=/src/HookForm.js

Has anyone had success getting these 2 woking together?

[jorisre]

Hi @paambaati 👋🏻

You should use Controller or useController.

Here is a working example with useController: https://codesandbox.io/s/chakra-ui-react-hook-form-custom-radio-forked-xve7r

👉🏻 useController doc
👉🏻 Controller doc

[paambaati]

@jorisre Thanks, this worked perfectly!

[4ortytwo]

@jorisre, can't access the codesandbox, could you please show that again?

[jorisre]

@4ortytwo Here is the example using useController https://codesandbox.io/s/chakra-ui-react-hook-form-custom-radio-forked-xve7r

[4ortytwo]

Thank you, @jorisre, I posted mine as well.

[bluebill1049]

have a look at this example too: https://codesandbox.io/s/chakra-ui-5mp8g

[4ortytwo]

I've got an alternative solution here: https://codesandbox.io/s/react-hook-form-v7-custom-chakra-radio-group-rhc6q
It uses useController as well and doesn't use refs.

[abdulrahman-mh]

you solution have some errors, and also a deprecated methods🐛