by Sai gowtham

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:

App.js
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.

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2021 (Beginner + Advanced)
JavaScript - The Complete Guide 2021 (Beginner + Advanced)
64,026 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
152,857 students enrolled
48.5 hours of video content
View Course