How to Use the option Element

The HTML option element represents a choice inside a select element. Use it when people should choose from prepared values such as a country, a plan, or a language.

The answer first

Minimal example

<label for="plan">Plan</label>
<select id="plan" name="plan">
  <option value="basic">Basic</option>
  <option value="pro">Pro</option>
</select>

select is the selection control as a whole, while each option is one choice. The page shows “Basic” and “Pro”. If the user chooses “Pro”, the form uses pro for submission rather than the displayed word.

This example has no action URL, so submitting it navigates to the current page. A real form also needs a form action and server-side processing.

Separate the label from the submitted value

Make the displayed label easy for people to read and the submitted value easy for software to process. This lets you keep a localized display while using stable identifiers on the server.

Markup	Displayed label	Submitted value
<option value="jp">Japan</option>	Japan	jp
<option value="en">English</option>	English	en
<option>Other</option>	Other	A value collected from the text

If you omit value, the option's text is used to produce a value for submission. Explicitly setting value is recommended when processing should not change just because the displayed text changes.

Choose one initially

Add selected when one option should be selected when the page first opens. For a single-select control, normally specify only one initial choice.

<select name="format">
  <option value="html">HTML</option>
  <option value="markdown" selected>Markdown</option>
</select>

selected records the initial state in HTML. Do not confuse that initial setting with the current state after a user has made a different choice.

Show a choice that cannot be selected

Add disabled to show an option while preventing the user from selecting it. This is useful for an unavailable feature or a choice that does not currently meet the required conditions.

<select name="delivery">
  <option value="standard">Standard delivery</option>
  <option value="express">Express delivery</option>
  <option disabled>Refrigerated delivery (coming soon)</option>
</select>

Write the reason in a way that is visible in the choice list. Use disabled when the existence and unavailable state of the choice are useful information.

Group related choices

When there are many choices, use optgroup to group related option elements. The optgroup is a group label, not a choice that can be selected.

<select name="language">
  <optgroup label="Markup">
    <option value="html">HTML</option>
  </optgroup>
  <optgroup label="Programming">
    <option value="javascript">JavaScript</option>
  </optgroup>
</select>

The user selects an option inside the group, not the group itself. Grouping makes related choices easier to find.

Using option outside select

An option can also provide a suggestion inside datalist. A select asks the user to choose from its options, while a datalist provides suggestions for an input. Choose between them based on whether the value must come from the list.

Common mistakes

• Putting a standalone option outside select. Normal choices belong inside select or datalist.
• Using the displayed label as the application identifier. Set a stable processing value with value.
• Thinking that selected is the JavaScript property for the current choice. Use option.selected for the current state and option.defaultSelected for the HTML initial setting.
• Relying only on the visual appearance of each option to explain the control. Associate a label with the select so its purpose is clear.
• Replacing a native select with div and JavaScript without checking keyboard and assistive-technology support. Consider the native control first.

Going further

An option brings together a display label, a submitted value, an initial selection, current selectedness, and a disabled state. These are different pieces of information even when they appear together in a small list. For a more complex form, check separately what people see and what the browser and server process.

Check it in Atlas

For the difference between the selected attribute and selectedness, label and value resolution, disabled and optgroup, the HTMLOptionElement API, form submission, and accessibility mappings, see the Yugien Atlas option element page. For grouping choices, see Atlas on optgroup; for the selection control as a whole, see Atlas on select; for shared form-submission rules, see Atlas on form.