How to set a Placeholder on a Select tag in React

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.

Cheryl Matth

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.