#How can I allow Shadcn Form (react hook form) to take in data from a dropdown list?

7 messages · Page 1 of 1 (latest)

unique lagoonBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

pastel phoenix
#

Maybe you can look at the combobox form implementation and create your own for dropdown

gusty remnant
#

@wintry pagoda If you mean a dropdown with an input box as well - then look at the combo-box implementation using cmds like Jarrah said. Otherwise, please clarify your question.

wintry pagoda
#

One way to allow react hook form to take in data from a dropdown list is to use the Controller component, which allows you to integrate custom components with react hook form. You can pass the name, control, and value props to the Controller, and use the render prop to return the custom dropdown component. You can also use the onChange prop to handle the value change of the dropdown and update the form state accordingly. Here is an example of how you can use Controller with a custom dropdown component:

<Controller
  name="dropdown"
  control={control}
  value={value}
  render={({ field }) => (
    <CustomDropdown
      {...field}
      options={options}
      onChange={(e) => {
        // handle the value change of the dropdown
        const selectedValue = e.target.value;
        // update the form state with the selected value
        field.onChange(selectedValue);
      }}
    />
  )}
/>

You can also use the register function to register the custom dropdown component as a form field, but you need to make sure that the component supports the ref attribute and exposes the value and onChange props. Here is an example of how you can use register with a custom dropdown component²:

<CustomDropdown
  name="dropdown"
  options={options}
  {...register("dropdown")}
/>

For more information on how to use react hook form with custom components, you can check out the official documentation or some of the web search results I found for you. I hope this helps! 😊

pastel phoenix
#

OP you're going to need to make your own component. As I suggested, refer to the combobox implementation for ideas and as a starting point