option: The Option element

The <option> HTML element is used to define an item contained in a <select>, an <optgroup>, or a <datalist> element. As such, <option> can represent menu items in popups and other lists of items in an HTML document.

Attributes

Specific attributes

Recommended attributes

value="[option value]" specifies the value to be sent to the server when this option is selected. If omitted, the text content of the element is used as the value.

Allowed attributes

disabled prevents the user from selecting this option.

label="[label text]" specifies the text label for the option. If not specified, the text content of the element is used.

selected indicates that this option should be initially selected when the page loads.

Global attributes

accesskey Specifies a keyboard shortcut to activate or focus an element.

aria-* Defines accessibility properties and states for assistive technologies.

class Specifies one or more CSS class names for styling the element.

data-* Stores custom data private to the page or application.

dir Sets the text direction (left-to-right, right-to-left, or auto).

hidden Hides the element from display and assistive technologies.

id Defines a unique identifier for the element within the document.

inputmode Hints which virtual keyboard type to display on mobile devices.

itemid Provides a global identifier for microdata items.

itemprop Defines a property name-value pair for microdata.

itemref Associates properties with an item via element IDs for microdata.

itemscope Creates a new microdata item container.

itemtype Specifies the vocabulary URL for microdata items (like Schema.org).

lang Specifies the primary language of the element’s content.

nonce Provides a cryptographic nonce for Content Security Policy.

role Defines the element’s semantic role for accessibility.

tabindex Controls keyboard navigation order and focusability.

title Provides advisory information displayed as a tooltip.

Example

<form action="/website-preferences" method="post">
  <h2>Configure Your Website</h2>
  
  <label for="theme">Color Theme:</label>
  <select id="theme" name="theme">
    <option value="">-- Choose a theme --</option>
    <option value="light" selected>Light Theme</option>
    <option value="dark">Dark Theme</option>
    <option value="auto">Auto (System Preference)</option>
    <option value="high-contrast" disabled>High Contrast (Coming Soon)</option>
  </select>
  
  <label for="generator">Static Site Generator:</label>
  <select id="generator" name="generator">
    <option value="jekyll" label="Jekyll (Ruby)">Jekyll</option>
    <option value="hugo" label="Hugo (Go)">Hugo</option>
    <option value="11ty" label="Eleventy (JavaScript)">11ty</option>
    <option value="gatsby" label="Gatsby (React)">Gatsby</option>
    <option value="nextjs" label="Next.js (React)">Next.js</option>
  </select>
  
  <label for="domains">Your Domains (select multiple):</label>
  <select id="domains" name="domains" multiple>
    <option value="personal.com" selected>personal.com (Primary)</option>
    <option value="blog.personal.com">blog.personal.com</option>
    <option value="photos.personal.com">photos.personal.com</option>
    <option value="archive.personal.com" disabled>archive.personal.com (Inactive)</option>
    <option value="new-domain.com">new-domain.com</option>
  </select>
  
  <label for="indieweb-features">IndieWeb Features:</label>
  <select id="indieweb-features" name="indieweb-features" multiple size="6">
    <optgroup label="Core Features">
      <option value="webmention" selected>Webmention</option>
      <option value="microformats" selected>Microformats</option>
      <option value="rss">RSS Feed</option>
    </optgroup>
    
    <optgroup label="Advanced Features">
      <option value="indieauth">IndieAuth</option>
      <option value="micropub">Micropub</option>
      <option value="microsub" disabled>Microsub (Beta)</option>
    </optgroup>
  </select>
  
  <button type="submit">Save Preferences</button>
</form>