option

Defines an item in a select dropdown or datalist autocomplete. Each option represents a choice the user can select.

When to Use

  • Inside select elements for dropdown menus
  • Inside datalist elements for autocomplete suggestions
  • Inside optgroup for grouped options

Basic Usage

Options have a value (submitted to server) and display text (shown to user).

Code

<select id="color"> <option value="">Select a color...</option> <option value="red">Red</option> <option value="blue">Blue</option> <option value="green">Green</option> </select>

Attributes

Attribute Purpose Notes
value Value sent to server on form submission Defaults to element text content if omitted
selected Pre-selects this option Boolean attribute
disabled Makes option unselectable Shown but grayed out
label Alternative display text Used in datalist for additional context

Placeholder Option

Use an empty value with disabled and selected for placeholder text.

Code

<select required> <option value="" disabled selected>Choose a category...</option> <option value="tech">Technology</option> <option value="design">Design</option> </select>

Pre-selected Option

Use selected to set an initial value.

Code

<select> <option value="en" selected>English</option> <option value="es">Spanish</option> </select>

Disabled Options

Disable specific options that shouldn't be selectable.

Code

<select> <option value="free">Free Plan</option> <option value="pro">Pro - $29/mo</option> <option value="enterprise" disabled>Enterprise - Contact Sales</option> </select>

Value vs Display Text

The value attribute is what gets submitted; the text content is what users see.

Submitted value will be country code (US, CA, etc.)

Code

<!-- value="US" submitted, "United States" displayed --> <option value="US">United States</option> <!-- If no value attribute, "United States" is both submitted and displayed --> <option>United States</option>

Within Option Groups

Options can be organized into optgroup categories.

In Datalist

Options in datalist provide autocomplete suggestions. The label attribute can add context.

Code

<input type="text" list="airports" /> <datalist id="airports"> <option value="JFK" label="New York - John F. Kennedy"></option> <option value="LAX" label="Los Angeles International"></option> </datalist>

Multiple Selection

In a multiple select, users can choose several options.

Hold Ctrl/Cmd to select multiple

Code

<select multiple size="5"> <option value="tech">Technology</option> <option value="design" selected>Design</option> <option value="travel" selected>Travel</option> </select>

Accessibility Notes

  • Descriptive text: Option text should clearly describe the choice
  • Logical order: Order options in a logical sequence (alphabetical, numerical, etc.)
  • Placeholder pattern: Use disabled first option for "Select..." prompts
  • Screen reader support: Options are read with their position in the list
  • Keyboard navigation: Arrow keys move through options, type to jump to matching text

CSS Styling Limitations

Options have very limited CSS styling possibilities due to browser rendering.

  • Cannot style individual option backgrounds or text colors reliably
  • Cannot add icons or images to options
  • Font styling may work but varies by browser
  • For fully custom dropdowns, consider JavaScript solutions

Related Elements

  • select - Dropdown container for options
  • optgroup - Groups related options together
  • datalist - Autocomplete container for options