How to set placeholder on select drop down in React

How to set placeholder on select drop down in React

Posted by Ervin Adams on June 25, 2022

How to set placeholder on select drop down in React

How to set placeholder on select drop down in React

Posted by Ervin Adams on June 25, 2022

Step 1. Install package

npm install react-select

Step 2. Create form with select field

Copy snippet below:

...
import Select from "react-select";
...

<div className="container">
     <div className="mx-auto col-6 mt-5">
         <Form>
              <Select placeholder="food items" name="foodItems" options={[{value:'egg', label:'egg'}, {value:'milk', label:'milk'}, {value:'cheese', label:'cheese'}]}/>
          </Form>
    </div>
</div>

The basic form above shows you how to show placeholder text in a dropdown select field. All you need to do is use the attribute placeholder. You will also see an options attribute with values to choose from.

Happy coding!