How to integrate RadixUI Themes controls with react-hook-form register()?

[nemanjam]

There is not a single documented example in RadixUI documentation. I have tried logical path but values aren't updated on change. I want to use register() from react-hook-form and not Controller.

Are there any working examples that I can have a look?

import { useForm } from 'react-hook-form';
import { Flex, Text, Slider, Switch } from '@radix-ui/themes';


const MyComponent: FC<Props> = () => {

  const methods = useForm<MyFormData>({
    mode: 'onChange',
    defaultValues,
  });
  const { register, formState, handleSubmit, getValues } = methods;

  // no values get updated
  console.error('getValues', getValues());

  const { max, min, ...timeSliderRegister } = register('timeSlider', {
    onChange: (e) => {
      // console.error('e', e); // just for debugging
    },
  });

  return (
    <form>
      <Text as="label" size="2">
        <Flex gap="2">
          <Switch {...register('isHighlightOnTime')} defaultChecked /> Highlight based on
          time
        </Flex>
      </Text>
      <Slider {...timeSliderRegister} defaultValue={[50]} />
    </form>
  )
}

[chrishoermann]

In this case you'll need to use controller since the state of the component is in the onCheckedChange and not the on change handler - see Switch Primitive Doc

something like this:

<Controller
   control={form.control}
   name={name}
   render={({ field }) => (
       <Switch checked={field.value} onCheckedChange={field.onChange} />    
   )}
/>

[DavidJayBrady]

There really is a lack of react-hook-form + radix themes examples out there. Adding another example using radix-themes TextField.

      <Form.Root onSubmit={handleSubmit(onSubmit)}>
        <Form.Field name="username">
          <Form.Label>Username</Form.Label>
          <Controller
            name="username"
            control={control}
            render={({ field }) => (
              <Form.Control {...field} asChild>
                <TextField.Root>
                  <TextField.Slot></TextField.Slot>
                </TextField.Root>
              </Form.Control>
            )}
          />
        </Form.Field>
      </Form.Root>

If there's a better way to control TextFields from radix-themes please let me know. The radix primitives page doesn't have a TextField component so Im not sure it has any way to control it, hence the use of Form