How to fix Unhandled Runtime Error TypeError: control.setCustomValidity in NextJS 14

Question

Before getting into my issue, let me tell you the outline of tech stack used in my project.

• Typescript

• NextJS v-14.0.2

• Radix UI

• Radix UI primitives Form and Radio Group

I am using the Radix UI Form in my project. Inside the form, I have used Radix UI radio group My code structure looks like this.

Note: I have used server action to create a new item

<Form.Root action={create}>
            <Form.Field  name="title">
              <Form.Label htmlFor="postingTitle" className="self-center px-4 text-right text-lg  text-gray-900 w-2/12">
                Title
              </Form.Label>
              <Form.Control asChild>
                <input
                  tye = "text" 
                  id=""
                  name="
                />
              </Form.Control>
            </Form.Field>

            <Form.Field name="body">
              <Form.Label htmlFor="body" >
                Content
              </Form.Label>
              <Form.Control asChild className="px-4">
                <textarea
                  id="Body"
                />
              </Form.Control>
            </Form.Field>

            <Form.Label htmlFor="expectedValue">
              Expected
            </Form.Label>
            <Form.Control asChild>
               <RadioGroup.Root defaultValue="1">
                          <Flex gap="2" direction="row">
                            <Text as="label" size="2">
                              <Flex gap="2">
                                <RadioGroup.Item value="1" /> Default
                              </Flex>
                            </Text>
                            <Text as="label" size="2">
                              <Flex gap="2">
                                <RadioGroup.Item value="2" /> Comfortable
                              </Flex>
                            </Text>
                            <Text as="label" size="2">
                              <Flex gap="2">
                                <RadioGroup.Item value="3" /> Compact
                              </Flex>
                            </Text>
                          </Flex>
                        </RadioGroup.Root>
            </Form.Control>
          </Form.Field>
            <div className="flex justify-end mb-5">
              <Button>
                Cancel
              </Button>
              <Form.Submit asChild>
                <Button>
                 Add Item
                </Button>
              </Form.Submit>
            </div>
          </Form.Root>

The form is loading fine with the options . But whenever I click on any one of the options in radio group, I am getting the below error
Unhandled Runtime Error

TypeError: control.setCustomValidity is not a function

Error I am getting when clicked on radio button

I tried to use Radix UI Radio Group in Radix UI form. But whenever I click on the radio group option , I am getting runtime error. I have also tried using native HTML radio button inside the form , but still getting the same issue.
Please help me solve this issue .

Answer 1

Seems like Radix RadioGroup is not integrated yet with Form! What I ended up doing is replace the surrounding <Form.Control> with good old <div>. Hope this helps.