<option> Option
A single choice in a select, datalist or optgroup.
Each <option> is one choice in a <select>, <optgroup> or <datalist>. People see the text, while the form sends the value. Leave value out and the text itself gets sent.
selected makes an option the default, and disabled makes it unavailable. Visible text should be short and plain.
The fallback from value to text is explained in the option element definition (opens in a new tab). Options live in a select or a datalist.
Syntax
<option value="value">Visible text</option>When to use it
Each <option> is one choice in a select or one suggestion in a datalist. People see readable text; the server gets a stable value. The text says "United Kingdom" and the value is GB, so labels can be renamed or translated later without breaking the data your server expects.
Option text inside a select should be short. Long options make the control wider, and phones cut them off. When every choice needs a description, like plans with prices and features, switch to radio buttons with labels. A label can be as long as you like.
required has a subtle rule. Only the very first option, with an empty value and outside any optgroup, counts as the "nothing chosen yet" placeholder. Put an empty-valued option anywhere else, say a second "Choose..." line, and it is accepted as a real answer that submits an empty value. Skip images and bold text inside options too. A traditional drop-down shows the plain text and nothing more.
Attributes
| Attribute | What it does |
|---|---|
value | Value sent when this option is chosen. |
selected | Chosen by default. |
disabled | Cannot be chosen. |
label | Alternative text to show. |
Live example
Edit the code and watch the preview.
<label for="size">Size</label>
<select id="size" name="size">
<option value="s">Small</option>
<option value="m" selected>Medium</option>
<option value="l">Large</option>
<option value="xl" disabled>Extra large (sold out)</option>
</select>More examples
Value differs from the text
The currency picker shows friendly names and sends the three-letter codes a payment system expects. You can reword or translate the visible text later and leave the values alone. US dollar starts out selected.
<form>
<label for="cur">Currency</label>
<select id="cur" name="currency">
<option value="EUR">Euro (EUR)</option>
<option value="GBP">British pound (GBP)</option>
<option value="JPY">Japanese yen (JPY)</option>
<option value="USD" selected>US dollar (USD)</option>
</select>
<button>Show prices</button>
</form>Options in a datalist
A datalist gets its suggestions from options too. The value here is the airport code that ends up in the field. The text holds the full name, and many browsers print it beside the code in the suggestion list.
<form>
<label for="from">Departure airport</label>
<input id="from" name="from" list="airports">
<datalist id="airports">
<option value="AMS">Amsterdam Schiphol</option>
<option value="CDG">Paris Charles de Gaulle</option>
<option value="LHR">London Heathrow</option>
</datalist>
<button>Find flights</button>
</form>Tip: Set a value and you can reword the text without breaking data.
Browser support
option is supported everywhere and defined in the HTML Living Standard. Styling is up to the browser and system. Some desktop browsers apply colors and fonts to options; phones mostly ignore them. Rich content inside an option is part of the newer customizable select feature, and that has not shipped in every browser yet.
Accessibility
Short, distinct option text lets users type the first letters to jump straight to a choice. The W3C listbox pattern (opens in a new tab) describes this type-ahead behaviour.
Common mistakes
Wrong
<option value="1" selected="false">One</option>Right
<option value="1">One</option>selected is boolean. Any value selects, even false; to unselect, remove it.
Frequently asked questions
What happens if an option has no value attribute?
The form submits its text content. That works, but now your server code depends on visible wording, which may get edited or translated. Give each <option> an explicit value, like a code or ID, and leave the text for humans: <option value="de">Germany</option>.
How do I preselect an option?
Put the boolean selected attribute on it. In a single select without it, the first option starts out selected. From JavaScript you can set select.value to the option's value instead. Do not mark several options selected unless the select has multiple.
Practise it
- Textarea, Select, Radio, Checkbox (Module 6: Forms)
- Project: Sign-up Form (Module 6: Forms)
- Connecting Labels (Module 8: Accessibility)
- Contact Page with Form (Module 10: Final Projects)