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