<option>
A single option in a `<select>` list, or a suggestion in a `<datalist>`.
- Display
- block
- Closing tag
- Required
- Permitted content
- Text
Example
#<label for="city">Workshop city</label>
<select id="city" name="city">
<option value="chi">Chicago</option>
<option value="aus" selected>Austin</option>
<option value="sea" disabled>Seattle (no seats left)</option>
</select>Definition and usage
#The <option> element represents one item you can choose. It usually sits inside <select> or <optgroup>, and inside <datalist> it acts as a suggestion for a text field.
The text between the tags is what the user sees, and the value attribute is the value sent to the server. Thanks to this, you can show "Seattle" while sending the short code sea. If you leave out value, the option’s text is sent instead.
You select an option from the start with the selected attribute, or block it with disabled. The closing </option> tag can technically be omitted, but it’s worth writing anyway.
Syntax
#<option value="value">Option text</option>Attributes
#text
The value sent with the form when this option is chosen. Without this attribute, the option’s text is sent.boolean attribute
Selects the option once the page loads. If you mark several options this way in a list withoutmultiple, the browser only keeps the last one selected. When you mark none, the first available option is selected.boolean attribute
Shows the option but doesn’t let you choose it. Useful for sold-out dates or features available only on a higher plan.label
text
A label for the option used instead of its content. Rarely needed in practice, since the text between the tags is usually enough on its own.
The element also supports all global attributes, such as class, id, style and hidden.
Attributes in practice
#value
textThe value sent with the form when this option is chosen. Without this attribute, the option’s text is sent.
<select name="level" aria-label="Level">
<option value="1">Beginner</option>
<option value="2">Intermediate</option>
<option value="3">Advanced</option>
</select>selected
boolean attributeSelects the option once the page loads. If you mark several options this way in a list without multiple, the browser only keeps the last one selected. When you mark none, the first available option is selected.
<select name="plan" aria-label="Plan">
<option value="monthly">Monthly</option>
<option value="yearly" selected>Yearly</option>
</select>disabled
boolean attributeShows the option but doesn’t let you choose it. Useful for sold-out dates or features available only on a higher plan.
<select name="date" aria-label="Date">
<option>October 12</option>
<option disabled>October 19 (no seats left)</option>
<option>October 26</option>
</select>Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Write
valuevalues in a stable, short form, for example as codes or ids. You can then freely change the option’s text without breaking the server-side code. - A hint option like "Choose…" should have
value="", with the list itself carrying therequiredattribute.
Related entries
#- <select>A dropdown list the user picks one or more options from.
- <optgroup>A named group of options inside a `<select>` list.
- <datalist>A list of suggestions for an `<input>` field. You can pick a proposal or type your own value.
- <form>A form that collects data from the user and sends it to a given address.
Spotted a mistake or missing an example? Write to us.