Select component is not working with react-hook-form

Here’s the snippet:

<Select
        className="max-w-xs"
        aria-label="Thought tag"
        {...register("tag")}
      >
        <Select.Option value={"default"} disabled>
          Select Tag
        </Select.Option>
        <Select.Option value={"Life"}>Life</Select.Option>
        <Select.Option value={"Tech"}>Tech</Select.Option>
        <Select.Option value={"Random"}>Random</Select.Option>
        <Select.Option value={"Rant"}>Rant</Select.Option>
        <Select.Option value={"Truth"}>Truth</Select.Option>
</Select>

and when I select something from the dropdown, it shows this:

I tried the native select and it works

<select className="select w-full max-w-xs" {...register("tag")}>
        <option disabled defaultChecked>
          Select Tag
        </option>
        <option value={"Life"}>Life</option>
        <option value={"Tech"}>Tech</option>
        <option value={"Random"}>Random</option>
        <option value={"Rant"}>Rant</option>
        <option value={"Truth"}>Truth</option>
</select>

Please let me know if this problem is specific to me or it is not really working, thank you.

[christianblandford]

Since we expose the ref and value and onChange, I think you should be able to use the select component with react-hook-form Controller, like you would with any other component library.

Can you try it out and let us know if it works?

I use RHF fairly often so if this doesn’t work I’ll take a look at the code and figure out a fix

[benjitrosch]

@Jiseeeh @seba5dev thanks for finding this, I’ll look into it. I’m not too familiar with react-hook-form because I’ve never used it, so if anybody has a better understanding of how it works/what it expects to plug into on a <select> please feel free to contribute a fix!