References

Beginner-friendly references for web development, with live, editable examples.

The HTML <option> tag

Element All modern browsers Updated
Quick answer

The HTML <option> element defines a single choice inside a <select>, <optgroup> or <datalist>. Its value is submitted; add selected to pre-select it.

Overview

The <option> element defines a single choice within a <select>, an <optgroup>, or a <datalist>. The text between its tags is what the user sees in the menu.

The value attribute is what actually gets submitted with the form when that option is chosen — and if you omit it, the option's visible text is submitted instead. So set a value whenever the submitted data should differ from the displayed label (for example a country code versus the country name).

Pre-select a choice with the selected attribute, and mark an unavailable choice with disabled so it shows but cannot be picked. The label attribute can supply a shorter display string when needed.

Syntax

<option value="uk" selected>United Kingdom</option>

Attributes

The <option> element supports the following attributes, in addition to the global attributes available to every HTML element.

Attribute Value Description
disabled A boolean attribute — present or absent. Disables a form control.
label A string of label text. Labels an option group or option.
selected A boolean attribute — present or absent. Pre-selects a dropdown option.
value A string or number, depending on the element and input type. Sets a control's value.

Example

Live example 
<select>
  <option value="" disabled selected>Choose a size…</option>
  <option>Small</option>
  <option>Medium</option>
  <option>Large</option>
</select>

Best practices

  • Give each <option> a value when the submitted data differs from the visible text.
  • Pre-select the default choice with the selected attribute.
  • Use disabled to show but block an unavailable choice.
  • A disabled, selected first option with empty value makes a useful "Please choose…" placeholder.

Frequently asked questions

What is the difference between an option's text and its value?
The text between the tags is shown to the user; the value attribute is submitted with the form. If there is no value, the text is submitted.
How do I pre-select an option?
Add the selected attribute to that <option>.
How do I disable an option?
Add the disabled attribute; the option appears in the list but cannot be chosen.
Where can the option element be used?
Inside a <select>, an <optgroup>, or a <datalist>.
optgroup output