Are there any example of using RadioButtonGroup with react-hook-form ?

[jaymehta-twilio]

Hi,

We've been using react-hook-form for the console. I was wondering if you've any good example of how can I wrap the RadioButtonGroup within Controller or register with react-hook-form ?

Below is my code. The required onChange on RadioGroupButton is kind of hijacks the selection.

<Controller
            name="Method"
            control={control}
            rules={{ required: true }}
            render={(): any => (
              <RadioGroup
                name="method-group"
                onChange={(newValue): void => {
                  setMethodValue(newValue);
                }}
                legend={webhookLabels.methodTitle}
                data-testid="Method-field"
              >
                <Radio
                  id="method-post"
                  data-testid="method-post"
                  value="post"
                  name="method-post"
                >
                  {webhookLabels.methodPost}
                </Radio>
                <Radio
                  id="method-get"
                  data-testid="method-get"
                  value="get"
                  name="method-get"
                >
                  {webhookLabels.methodGet}
                </Radio>
              </RadioGroup>
            )}
          ></Controller>

[vankhoawin]

disclaimer: not on the DSYS team, but this is react-hook-form-paste's solution (react-hook-form version ^6.13.1):

Source Code
Storybook

the TL;DR you should be able to pass in the render props from Controller into RadioGroup.

[TheSisb]

Thanks for the assist @vnguyen94! @jaymehta1986 was this enough to get you going by any chance?

The required onChange on RadioGroupButton is kind of hijacks the selection.

I haven't used react-hook-form before but as far as I can tell it should work with RadioGroup. What was the issue here exactly? Can you provide a codesandbox?