How to add a placeholder to select tag in React

In this tutorial, we are going to learn about how to set a placeholder text to a <select> (tag) in React.

Some of the Html form elements for example input, textarea we have a built-in placeholder attribute to add the placeholder text.

<input placeholder="Name"/>
<textarea placeholder="comment"></textarea>

But for the select tag, we can’t use the html placeholder attribute instead of we can do it like this.

Setting a placeholder to select tag

To set a placeholder to a select tag, we can use the <option> element followed by the disabled and hidden attributes.

Here is an example, that adds the placeholder “Choose your car” to the select tag:

import React, { useState } from "react";

export default function App() {
  const [value, setValue] = useState("default");
  const handleChange = (e) => {
    setValue(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(value);
  };
  return (
    <form onSubmit={handleSubmit}>
      <select defaultValue={value} onChange={handleChange}>
        <option value="default" disabled hidden>
          Choose your car        </option>
        <option value="audi">Audi</option>
        <option value="bmw">Bmw</option>
        <option value="benz">Benz</option>
      </select>
      <button>Submit</button>
    </form>
  );
}

1. In the above code, we first set a useState() hook intial-value to default and added a value="default" to the “Choose your car” option so that it acts as placeholder for the select tag.

2. The disabled attribute makes the option unable to select.

3. Whenever a user clicks on a select dropdown the hidden attribute makes this option hidden and shows the remaning options.