← Back to All Tags

<option>

Defines an option in a select list

Definition and Usage

The <option> element establishes an option in a select list (dropdown list).

<option> elements go inside a <select>, <optgroup>, or <datalist> element.

Tip: The <option> tag can be used without any attributes, but you usually need the value attribute, which indicates what is sent to the server on form submission.
Tip: If you have a long list of options, you can group related options with the <optgroup> tag.

Browser Support

The <option> tag is supported in all major browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

Attributes

Attribute Value Description
value text Specifies the value to be sent to the server when the form is submitted
selected selected Specifies that an option should be pre-selected when the page loads
disabled disabled Specifies that an option should be disabled (cannot be selected)
label text Specifies a shorter label for an option (displayed in the dropdown)

Examples

Basic Select with Options

Create a simple dropdown with options:

Example

<label for="country">Choose a country:</label>
<select id="country" name="country">
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
  <option value="ca">Canada</option>
  <option value="au">Australia</option>
</select>

Pre-selected Option

Set a default selected option using the selected attribute:

Example

<label for="color">Choose your favorite color:</label>
<select id="color" name="color">
  <option value="red">Red</option>
  <option value="blue" selected>Blue</option>
  <option value="green">Green</option>
  <option value="yellow">Yellow</option>
</select>

Disabled Options

Disable specific options that cannot be selected:

Example

<label for="product">Select a product:</label>
<select id="product" name="product">
  <option value="">-- Choose a product --</option>
  <option value="laptop">Laptop - $999</option>
  <option value="phone">Phone - $699</option>
  <option value="tablet" disabled>Tablet - Out of Stock</option>
  <option value="watch">Smartwatch - $299</option>
</select>

Options with Optgroup

Group related options together using <optgroup>:

Example

<label for="vehicle">Choose a vehicle:</label>
<select id="vehicle" name="vehicle">
  <optgroup label="Cars">
    <option value="sedan">Sedan</option>
    <option value="suv">SUV</option>
    <option value="coupe">Coupe</option>
  </optgroup>
  <optgroup label="Trucks">
    <option value="pickup">Pickup</option>
    <option value="van">Van</option>
  </optgroup>
</select>

Datalist Options

Use options with a datalist for autocomplete suggestions:

Example

<label for="browser">Choose your browser:</label>
<input list="browsers" id="browser" name="browser" />
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>

Multiple Select

Allow multiple options to be selected:

Example

<label for="languages">Select programming languages (hold Ctrl/Cmd):</label>
<select id="languages" name="languages" multiple size="5">
  <option value="javascript">JavaScript</option>
  <option value="python">Python</option>
  <option value="java">Java</option>
  <option value="csharp">C#</option>
  <option value="ruby">Ruby</option>
  <option value="php">PHP</option>
</select>

Try it Yourself

Interactive Example

Try selecting different options:

Option vs Datalist

  • With <select>: Creates a dropdown list where users must choose from predefined options
  • With <datalist>: Provides autocomplete suggestions while allowing users to type their own value
  • Form submission: Select sends the option's value attribute; datalist sends whatever the user types or selects
When to use: Use <select> when you need strict control over values. Use <datalist> when you want to provide suggestions but allow custom input.

Best Practices

  • Always set the value attribute for proper form submission
  • Use descriptive text between the <option> tags for user-friendly display
  • Include a default "Please select" option with an empty value for required fields
  • Use the label attribute when you need shorter text in the dropdown
  • Group related options with <optgroup> for better organization
  • Mark unavailable options as disabled rather than removing them
  • Always pair select elements with a <label> for accessibility
  • Use selected attribute to set sensible defaults when appropriate

Accessibility Considerations

  • Always provide a <label> with a for attribute matching the select's id
  • Avoid using placeholder-style first options as they're not accessible
  • Screen readers announce option text, not the value attribute
  • Disabled options are announced as unavailable by screen readers
  • Use aria-label or aria-labelledby if a visible label isn't possible

Related Tags