HTML

How to add a placeholder for HTML <select> component?

To add a placeholder to a <select> element in HTML, you can use the <option> element as the placeholder and give it the disabled and selected attributes. Here is an example:

<select>
  <option disabled selected>Select an option</option>
  <option value="op1">Option 1</option>
  <option value="op2">Option 2</option>
  <option value="op3">Option 3</option>
</select>

This prevents the user from selecting this option from the dropdown menu and instead creates a select> element with the placeholder "Select an option." The placeholder will appear in the dropdown menu when the user clicks the select> element, but it won't be selectable. The placeholder will be changed to the selected option whenever the user chooses one of the other choices.

Logo - Albert Walicki

Hello, I'm a frontend developer with over eight years of experience, freelancer. I'm also a mentor for junior frontend developers. I wrote a book for Junior Frontend developers called Frontend Unicorn.

© 2020-present Albert Walicki. All Rights Reserved

Policy