To set a Placeholder on a Select tag in React, We will guide you in a very simple way that is to use the <option> tag and the disabled attribute. See details below.
Set a Placeholder on a Select tag in React
Use the <option> tag
A little introduction, in HTML the <input>
tag has a built-in ‘placeholder’ attribute to add placeholder text :
<input placeholder="Enter your name here…" />
With the <select> tag, we cannot use it, but we will do the following:
import React, { useState } from "react"; function App() { const [select, setSelect] = useState(""); const handleChange = (e) => { setSelect(e.target.value); }; const handleSubmit = (e) => { e.preventDefault(); console.log(select); }; return ( <form onSubmit={handleSubmit}> <select value={select} onChange={handleChange}> <option disabled={true} value=""> -- Choose your course -- </option> <option value="react">ReactJs</option> <option value="node">NodeJs</option> <option value="python">Python</option> <option value="golang">Golang</option> </select> <button>Submit</button> </form> ); } export default App;
The code will return a Form consisting of a <select>
tag with options that are the names of the courses and when working with forms, the ‘Submit’ button is indispensable.
const [select, setSelect] = useState("")
: create a state to store the value of select every time we select the course ( initialization value will be an empty string ).
In the options section of the <select>
tag create an <option>
tag with the label ‘ -- Choose your course --
‘. This will be the placeholder on a Select tag.
<option disabled={true} value="">-- Choose your course --</option>
disabled = {true}
: This attribute makes the option unselectable.
As you can see, intentionally assigning value = ''
to coincide with the initial value of the state. When running the application for the first time, the <select>
tag will always select our option placeholder.
Finally, two event handler functions:
const handleChange = (e) => { setSelect(e.target.value); }; const handleSubmit = (e) => { e.preventDefault(); console.log(select); };
handleChange
: responsible for reassigning the state value when the selection changes.
handleSubmit
: simply ‘log’ the value of select.
Output:

Use the Ant Design library
Ant Design is a very convenient frontend development support library.
Install:
npm i antd
Add Antd Design’s Select component to the App.js
file. Still choosing the course, we’ll change the code a bit:
import React from "react"; import "./index.css"; import { Select } from "antd"; const App = () => ( <> <Select placeholder="-- Choose your course --" options={[ { value: "react", label: "ReactJs" }, { value: "node", label: "NodeJs" }, { value: "python", label: "Python" } ]} /> </> ); export default App;
We can use the placeholder property directly and options that are an array of course objects.
Output:

Summary
In short, to set a Placeholder on a Select tag in React, we will use the methods above. Hope it helps you to solve the problem. If you have any questions, please leave us a comment.

After studying and researching, I have acquired the necessary programming skills of a web programmer. In addition to HTML, Css, Bootstrap has some popular libraries such as reactJS and NodeJS. It is enough for me when designing from front-end to back-end.