option
Defines an item in a select dropdown or datalist autocomplete. Each option has a value submitted to the server and display text shown to the user.
When to Use
Examples
Options in context: basic select, optgroups, multiple select, and disabled states.
Value vs Display Text
The value attribute is what gets submitted to the server. The text content between the tags is what users see in the dropdown. If value is omitted, the text content serves as both.
<!-- value="US" is submitted; "United States" is displayed --><option value="US">United States</option> <!-- If no value attribute, the text content is both submitted and displayed --><option>United States</option>Attributes
| Attribute | Purpose | Notes |
|---|---|---|
value |
Value sent to server on form submission | Defaults to element text content if omitted |
selected |
Pre-selects this option on page load | Boolean attribute |
disabled |
Makes option visible but unselectable | Shown grayed out |
label |
Alternative display text | Used in datalist to add context alongside the value |
Placeholder Pattern
Combine an empty value with disabled and selected to create a placeholder prompt. Pair with required on the select to force a real selection.
<!-- Placeholder pattern: empty value + disabled + selected --><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 the selected attribute to set a default value. Without it, the first option is selected by default.
<select> <option value="en" selected>English</option> <option value="es">Spanish</option> <option value="fr">French</option></select>Disabled Options
Disable specific options that should be visible but not selectable. Useful for showing unavailable choices.
<select> <option value="free">Free Plan</option> <option value="pro">Pro - $29/mo</option> <option value="enterprise" disabled>Enterprise - Contact Sales</option></select>In Datalist
Options in datalist provide autocomplete suggestions for text inputs. The label attribute adds descriptive context alongside the value.
<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> <option value="ORD" label="Chicago O'Hare"></option></datalist>CSS Styling Limitations
The <option> element has very limited CSS styling possibilities due to OS-level rendering. VB styles the parent select but cannot style individual options.
- Cannot reliably style option backgrounds or text colors
- Cannot add icons or images to options
- Font styling may work but varies by browser and OS
- For fully custom dropdowns, see the combo-box web component
Customizable Select (Chrome 135+)
With appearance: base-select, options gain full CSS styling. You can add images, icons, flex layout, hover states, and checked styling. Options can contain rich HTML content that gets cloned into the selectedcontent trigger. See the select customizable select section for details.
Accessibility
- Descriptive text: Option text should clearly describe the choice
- Logical order: Order options in a predictable sequence (alphabetical, numerical, by frequency)
- Keyboard navigation: Arrow keys move through options; typing jumps to matching text
- Screen reader support: Options are announced with their position in the list
Related
- select - Dropdown container for options
- optgroup - Groups related options together
- selectedcontent - Clones selected option content into the trigger
- datalist - Autocomplete container for options