ReactJS: how to display placeholder on select input

Question

I would like to add placeholder texture to select input using ReactJS, however my current attempt is not working.

My code looks like this:

<Input type="select" placeholder="placeholder">
     <option>First option</option>
     <option>second option</option>
     <option>Thrid option</option>
</Input>

I am expecting the text "placeholder" to show up on the input field before any option has been selected, however the "first option" is showing by default.

Possible duplicate of [How do I make a placeholder for a 'select' box?](https://stackoverflow.com/questions/5805059/how-do-i-make-a-placeholder-for-a-select-box) — zero298, Feb 12 '19 at 19:25

Dacre Denny · Accepted Answer · 2020-10-29T01:13:48.567

18

To achieve the placeholder effect on a <select> element in ReactJS, first add the defaultValue prop to the <select> element and preassign a default value of say the empty string. Then, add a disabled <option> item with a value that matches defaultValue as shown:

<select defaultValue="">
     <option disabled={true} value="">placeholder</option>
     <option>First option</option>
     <option>second option</option>
     <option>Thrid option</option>
</select>

Update

A more robust approach is as follows:

<select defaultValue="">
     <option hidden value="">placeholder</option>
     <option>First option</option>
     <option>second option</option>
     <option>Thrid option</option>
</select>

edited Oct 29 '20 at 01:13

answered Feb 12 '19 at 19:22

Dacre Denny

29,664
5
45
65

im getting this error `Warning: Use the `defaultValue` or `value` props on – Feb 12 '19 at 19:29
@toymoy Just updated the answer to make this more compatible with reactjs - does that help? – Dacre Denny Feb 12 '19 at 19:36
I tried and not working, still the first option shows up. – Chan Austin Oct 29 '20 at 00:51
@ChanAustin please see the update in the answer above – Dacre Denny Oct 29 '20 at 01:14

score 1 · Answer 2 · answered Feb 12 '19 at 19:22

1

You can achieve this functionality using <option value="" hidden> Your Placeholder here </option>

answered Feb 12 '19 at 19:22

muhammad usman

37
4

This has a better behaviour than the other answer to use `disabled` - in this case, the 'placeholder' is not displayed in the options to choose from, even though its disabled. With this solution, it just isn't there, only the actual selectable values are in the list. – andy mccullough Apr 20 '20 at 19:37

ReactJS: how to display placeholder on select input

2 Answers2

Update