Select Menus Placeholder Options
Description
A placeholder provides three benefits for select menus:
- A placeholder requires users to make a selection. By default, the first option in the list will be selected if no placeholder.
- A placeholder can be used to display hint text for the unselected select button.
- A placeholder also appears as the header when the options list is displayed.
We can configure a placeholder in three ways:
We can add text to an option without a value.
<option value="">Select one...</option>
We can add the data-placeholder="true" attribute
to an option when it contains text and a value:
<option value="null" data-placeholder="true">Select one...</option>
To make the field required without hint text or a header, use an empty option:
<option value=""></option>