How to add a react-select dropdown with react-hook-form in React

In this article, we will show you how to add a react-select dropdown with react-hook-form in React. Similarly, you can implement other packages with a React Hook Form.

Here, we will continue the previous article so advise you to go through that article.

Validate a form in React using react-hook-form

Demo Application

Output - How to add a react-select dropdown with react-hook-form in React - Clue Mediator

Add a react-select dropdown with react-hook-form in React

1. Create a simple form
2. Add a react-select dropdown in form
3. Output

1. Create a simple form

Refer to the following articles, If you don’t know how to create a form using react-hook-form.

• Create a simple form in React using react-hook-form
• Validate a form in React using react-hook-form

2. Add a react-select dropdown in form

Here, we’ll use the react-select npm package to add the dropdown in the form.

To add the third party package, we have to use the `useController` from the `react-hook-form`.

const { field } = useController({ name: 'language', control });
const { value: langValue, onChange: langOnChange, ...restLangField } = field;

// OR

const { field: { value: langValue, onChange: langOnChange, ...restLangField } } = useController({ name: 'language', control });

As you can see in the above code, we have used the `control` in the `useController`. So don’t forget to export `control` from the `useForm()`.

Now, let’s use the above exported method in the `react-select`.

<select class="select-input" placeholder="Select Language" isclearable="" options={languageList} value="{langValue" ?="" languagelist.find(x=""> x.value === langValue) : langValue}
  onChange={option => langOnChange(option ? option.value : option)}
  {...restLangField}
/>

3. Output
Let's put all the code together and see how it looks.App.js
import React, { useState } from 'react';
import { useForm, useController } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from "yup";
import Select from 'react-select';const schema = yup.object({
  name: yup.string().required("Please enter name"),
  email: yup.string().email("Please enter valid email").required("Please enter email"),
  website: yup.string().url("Please enter valid url").required("Please enter url"),
  language: yup.number().nullable().required("Please select language"),
});const languageList = [
  { value: 1, label: 'English' },
  { value: 2, label: 'Hindi' }
];function App() {
  const [data, setData] = useState();
  const { register, handleSubmit, formState, control } = useForm({
    resolver: yupResolver(schema)
  });  const { field: { value: langValue, onChange: langOnChange, ...restLangField } } = useController({ name: 'language', control });  const { errors } = formState;  const onSubmit = (formData) => {
    setData({ ...formData });
  }  return
    Add a react-select dropdown with react-hook-form - Clue Mediator

      Name
      </select><input placeholder="Name" {...register('name')}="">
      {errors.name && <p>{errors.name.message}</p>}

    <div>
      <label>Email</label>
      <input placeholder="Email" {...register('email')}="">
      {errors.email && <p>{errors.email.message}</p>}
    </div>
    <div>
      <label>Website</label>
      <input placeholder="Website" {...register('website')}="">
      {errors.website && <p>{errors.website.message}</p>}
    </div>
    <div>
      <label>Language</label>
      <select class="select-input" placeholder="Select Language" isclearable="" options={languageList} value="{langValue" ?="" languagelist.find(x=""> x.value === langValue) : langValue}
        onChange={option => langOnChange(option ? option.value : option)}
        {...restLangField}
      />
      {errors.language && {errors.language.message}}


      Submit

    {data && <pre>{JSON.stringify(data, null, 2)}</pre>}

}export default App;
Run the application and check the output in the browser.I hope you find this article helpful.Thank you for reading. Happy Coding..!! 🙂Demo & Source Code
GitHub Repository
StackBlitz Project
<!-- /wp:html --></select></div>