How can I implement React Hook Form with Radix UI Select?

Question

I'm using the radix ui primitive Select, but i don't know how to integrate it with React Hook Form. I've tried putting the register in the Select.Root tag but it didn't work.

I'm also using Styled Components so all the Select tags are used like <S.Something/> because i've imported all as S

This is the function that creates the item:

const SelectItem = React.forwardRef(({ children, ...props } : any, forwardedRef) => {
        return (
          <S.Item  {...props} ref={forwardedRef}>
            <S.ItemText>{children}</S.ItemText>
            <S.ItemIndicator>
              <S.TriggerIcon src="/form/selector-icon.svg" />
            </S.ItemIndicator>
          </S.Item>
        );
      });

Then i create the Select this way:

   <S.FormItem key={index}>
      <S.Label htmlFor={index+''}>{question.question}</S.Label>
      <S.Root {...register(`${questionName}`, { required: true })}>
           <S.Trigger id={index+''}>
               <S.Value/>
               <S.Icon>
               <S.TriggerIcon src="/form/selector-icon.svg" />
               </S.Icon>
           </S.Trigger>
       <S.Portal>
          <S.Content>
             <S.SelectorUp>
                 Up
             </S.SelectorUp>
             <S.Viewport>
                  {question.options?.map((option, i) => {
                       return (
                            <SelectItem key={i} value={option}>
                                {option}
                            </SelectItem>
                              )
                  })}          
             </S.Viewport>
             <S.SelectorDown>
                 Down
             </S.SelectorDown>
          </S.Content>
       </S.Portal>
     </S.Root>
  </S.FormItem>

Answer 1

I was facing the same problem, but solved it by passing the field.onChange value to onValueChange prop.

I used Controller from the "react-hook-form" library to wrap the Radix Select.

Previously I had it like this

<Controller
    control={control}
    name="currency"
    render={({ field }) => {
      return (
        <Select {...field}>
        ....
        </Select>
      ...
 </Controller>

After adding onValueChange prop

<Controller
        control={control}
        name="currency"
        render={({ field }) => {
          return (
            <Select onValueChange={field.onChange} {...field}>
            ....
            </Select>
          ...
</Controller>

For your code, I think you'll have to wrap the S.Root with the Controller, which will look something like this.

<Controller 
       name={`${questionName}`} 
       rules={{required:true}} 
       render={({field})=>{
         <S.Root onValueChange={field.onChange} {...field}>
                  ...
         </S.Root>
    }}></Controller>