<option> - The Option Element

The `<option>` Element

Form Control HTML 2.0

The option element defines individual choices within a <select> dropdown menu or <datalist> element. Each option represents a selectable value.

Quick Example

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

Result

Interactive code playground requires JavaScript. Here's the code:

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

Syntax

<select name="field">
  <option value="value">Display Text</option>
</select>

The value attribute defines what gets submitted with the form, while the text content is what users see.

Attributes

Core Attributes

Attribute	Description	Example
`value`	Value submitted with form	`value="option1"`
`selected`	Pre-selects the option	`selected`
`disabled`	Disables the option	`disabled`
`label`	Alternative display text	`label="Short"`

Common Use Cases

Basic Options

<form>
<label for="language">Programming Language:</label>
<select id="language" name="language">
  <option value="">Select language</option>
  <option value="js">JavaScript</option>
  <option value="py">Python</option>
  <option value="java">Java</option>
  <option value="cpp">C++</option>
</select>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label for="language">Programming Language:</label>
<select id="language" name="language">
  <option value="">Select language</option>
  <option value="js">JavaScript</option>
  <option value="py">Python</option>
  <option value="java">Java</option>
  <option value="cpp">C++</option>
</select>
</form>

Pre-selected Option

<form>
<label for="size">Size:</label>
<select id="size" name="size">
  <option value="xs">Extra Small</option>
  <option value="s">Small</option>
  <option value="m" selected>Medium (Default)</option>
  <option value="l">Large</option>
  <option value="xl">Extra Large</option>
</select>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label for="size">Size:</label>
<select id="size" name="size">
  <option value="xs">Extra Small</option>
  <option value="s">Small</option>
  <option value="m" selected>Medium (Default)</option>
  <option value="l">Large</option>
  <option value="xl">Extra Large</option>
</select>
</form>

Disabled Options

<form>
<label for="subscription">Subscription Plan:</label>
<select id="subscription" name="plan">
  <option value="">Choose plan</option>
  <option value="free">Free - $0/month</option>
  <option value="basic">Basic - $9/month</option>
  <option value="pro">Pro - $29/month</option>
  <option value="enterprise" disabled>Enterprise - Contact Sales</option>
</select>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label for="subscription">Subscription Plan:</label>
<select id="subscription" name="plan">
  <option value="">Choose plan</option>
  <option value="free">Free - $0/month</option>
  <option value="basic">Basic - $9/month</option>
  <option value="pro">Pro - $29/month</option>
  <option value="enterprise" disabled>Enterprise - Contact Sales</option>
</select>
</form>

Options with Different Values and Display Text

<form>
<label for="country">Country:</label>
<select id="country" name="country">
  <option value="">Select country</option>
  <option value="us">United States</option>
  <option value="gb">United Kingdom</option>
  <option value="ca">Canada</option>
  <option value="au">Australia</option>
  <option value="de">Germany</option>
</select>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label for="country">Country:</label>
<select id="country" name="country">
  <option value="">Select country</option>
  <option value="us">United States</option>
  <option value="gb">United Kingdom</option>
  <option value="ca">Canada</option>
  <option value="au">Australia</option>
  <option value="de">Germany</option>
</select>
</form>

Empty First Option for Required Selects

<form>
<label for="department">Department (required):</label>
<select id="department" name="department" required>
  <option value="">-- Please select --</option>
  <option value="sales">Sales</option>
  <option value="marketing">Marketing</option>
  <option value="engineering">Engineering</option>
  <option value="hr">Human Resources</option>
</select>

<button type="submit">Submit</button>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label for="department">Department (required):</label>
<select id="department" name="department" required>
  <option value="">-- Please select --</option>
  <option value="sales">Sales</option>
  <option value="marketing">Marketing</option>
  <option value="engineering">Engineering</option>
  <option value="hr">Human Resources</option>
</select>

<button type="submit">Submit</button>
</form>

Options Without Value Attribute

<form>
<label for="fruit">Fruit:</label>
<select id="fruit" name="fruit">
  <option>Apple</option>
  <option>Banana</option>
  <option>Cherry</option>
  <option>Date</option>
</select>
</form>

<p>Note: When submitted, the display text becomes the value</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label for="fruit">Fruit:</label>
<select id="fruit" name="fruit">
  <option>Apple</option>
  <option>Banana</option>
  <option>Cherry</option>
  <option>Date</option>
</select>
</form>

<p>Note: When submitted, the display text becomes the value</p>

Using the Label Attribute

<form>
<label for="timezone">Timezone:</label>
<select id="timezone" name="timezone">
  <option value="est" label="Eastern">Eastern Standard Time (EST)</option>
  <option value="cst" label="Central">Central Standard Time (CST)</option>
  <option value="mst" label="Mountain">Mountain Standard Time (MST)</option>
  <option value="pst" label="Pacific">Pacific Standard Time (PST)</option>
</select>
</form>

<p>Note: Some browsers may show the label instead of full text</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label for="timezone">Timezone:</label>
<select id="timezone" name="timezone">
  <option value="est" label="Eastern">Eastern Standard Time (EST)</option>
  <option value="cst" label="Central">Central Standard Time (CST)</option>
  <option value="mst" label="Mountain">Mountain Standard Time (MST)</option>
  <option value="pst" label="Pacific">Pacific Standard Time (PST)</option>
</select>
</form>

<p>Note: Some browsers may show the label instead of full text</p>

Options in Multiple Select

<form>
<label for="toppings">Pizza Toppings:</label>
<select id="toppings" name="toppings" multiple size="6">
  <option value="cheese" selected>Extra Cheese</option>
  <option value="pepperoni">Pepperoni</option>
  <option value="mushrooms" selected>Mushrooms</option>
  <option value="onions">Onions</option>
  <option value="peppers">Bell Peppers</option>
  <option value="olives">Olives</option>
</select>
<small>Hold Ctrl/Cmd to select multiple</small>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label for="toppings">Pizza Toppings:</label>
<select id="toppings" name="toppings" multiple size="6">
  <option value="cheese" selected>Extra Cheese</option>
  <option value="pepperoni">Pepperoni</option>
  <option value="mushrooms" selected>Mushrooms</option>
  <option value="onions">Onions</option>
  <option value="peppers">Bell Peppers</option>
  <option value="olives">Olives</option>
</select>
<small>Hold Ctrl/Cmd to select multiple</small>
</form>

Options in Datalist

<form>
<label for="browser">Browser:</label>
<input type="text" id="browser" name="browser" list="browsers"
       placeholder="Type or select">

<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label for="browser">Browser:</label>
<input type="text" id="browser" name="browser" list="browsers"
       placeholder="Type or select">

<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>
</form>

Dynamic Options with JavaScript

Adding Options Programmatically

<form>
<label for="dynamic">Dynamic Options:</label>
<select id="dynamic" name="dynamic">
  <option value="">Select option</option>
</select>

<button type="button" onclick="addOptions()">Add Options</button>
</form>

<script>
function addOptions() {
  const select = document.getElementById('dynamic');
  const options = ['Option A', 'Option B', 'Option C', 'Option D'];

  options.forEach((text, index) => {
    const option = document.createElement('option');
    option.value = 'opt' + (index + 1);
    option.textContent = text;
    select.appendChild(option);
  });
}
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label for="dynamic">Dynamic Options:</label>
<select id="dynamic" name="dynamic">
  <option value="">Select option</option>
</select>

<button type="button" onclick="addOptions()">Add Options</button>
</form>

<script>
function addOptions() {
  const select = document.getElementById('dynamic');
  const options = ['Option A', 'Option B', 'Option C', 'Option D'];

  options.forEach((text, index) => {
    const option = document.createElement('option');
    option.value = 'opt' + (index + 1);
    option.textContent = text;
    select.appendChild(option);
  });
}
</script>

Filtering Options

<label for="search">Search:</label>
<input type="text" id="search" placeholder="Filter options...">

<label for="filtered">Filtered Select:</label>
<select id="filtered" name="filtered" size="5">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
<option value="date">Date</option>
<option value="elderberry">Elderberry</option>
<option value="fig">Fig</option>
</select>

<script>
const search = document.getElementById('search');
const select = document.getElementById('filtered');
const allOptions = Array.from(select.options);

search.addEventListener('input', (e) => {
  const filter = e.target.value.toLowerCase();

  allOptions.forEach(option => {
    const text = option.textContent.toLowerCase();
    option.style.display = text.includes(filter) ? '' : 'none';
  });
});
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<label for="search">Search:</label>
<input type="text" id="search" placeholder="Filter options...">

<label for="filtered">Filtered Select:</label>
<select id="filtered" name="filtered" size="5">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
<option value="date">Date</option>
<option value="elderberry">Elderberry</option>
<option value="fig">Fig</option>
</select>

<script>
const search = document.getElementById('search');
const select = document.getElementById('filtered');
const allOptions = Array.from(select.options);

search.addEventListener('input', (e) => {
  const filter = e.target.value.toLowerCase();

  allOptions.forEach(option => {
    const text = option.textContent.toLowerCase();
    option.style.display = text.includes(filter) ? '' : 'none';
  });
});
</script>

Changing Selected Option

<form>
<label for="priority">Priority:</label>
<select id="priority" name="priority">
  <option value="low">Low</option>
  <option value="medium" selected>Medium</option>
  <option value="high">High</option>
  <option value="critical">Critical</option>
</select>

<button type="button" onclick="setHigh()">Set to High</button>
<button type="button" onclick="setCritical()">Set to Critical</button>
</form>

<script>
const select = document.getElementById('priority');

function setHigh() {
  select.value = 'high';
}

function setCritical() {
  select.value = 'critical';
}
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label for="priority">Priority:</label>
<select id="priority" name="priority">
  <option value="low">Low</option>
  <option value="medium" selected>Medium</option>
  <option value="high">High</option>
  <option value="critical">Critical</option>
</select>

<button type="button" onclick="setHigh()">Set to High</button>
<button type="button" onclick="setCritical()">Set to Critical</button>
</form>

<script>
const select = document.getElementById('priority');

function setHigh() {
  select.value = 'high';
}

function setCritical() {
  select.value = 'critical';
}
</script>

Best Practices

<select name="status">
  <option value="active">Active</option>
  <option value="pending">Pending</option>
  <option value="inactive">Inactive</option>
</select>

<select name="status">
  <option value="1">Active</option>
  <option value="2">Pending</option>
  <option value="3">Inactive</option>
</select>

Provide Clear Default Options

Good
Avoid

<select name="country" required>
  <option value="">Please select a country</option>
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
</select>

<select name="country" required>
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
</select>

Order Options Logically

Consider alphabetical, chronological, or frequency-based ordering:

<form>
<label for="month">Month:</label>
<select id="month" name="month">
  <option value="">Select month</option>
  <option value="01">January</option>
  <option value="02">February</option>
  <option value="03">March</option>
  <option value="04">April</option>
  <option value="05">May</option>
  <option value="06">June</option>
  <option value="07">July</option>
  <option value="08">August</option>
  <option value="09">September</option>
  <option value="10">October</option>
  <option value="11">November</option>
  <option value="12">December</option>
</select>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label for="month">Month:</label>
<select id="month" name="month">
  <option value="">Select month</option>
  <option value="01">January</option>
  <option value="02">February</option>
  <option value="03">March</option>
  <option value="04">April</option>
  <option value="05">May</option>
  <option value="06">June</option>
  <option value="07">July</option>
  <option value="08">August</option>
  <option value="09">September</option>
  <option value="10">October</option>
  <option value="11">November</option>
  <option value="12">December</option>
</select>
</form>

Accessibility

Avoid Disabled Selected Options

Good
Avoid

<select name="choice" required>
  <option value="">-- Select --</option>
  <option value="a">Option A</option>
  <option value="b">Option B</option>
</select>

<select name="choice" required>
  <option value="" disabled selected>-- Select --</option>
  <option value="a">Option A</option>
  <option value="b">Option B</option>
</select>

Disabled selected options can confuse screen readers.

Keep Option Text Concise

Long option text can be difficult to read and scan:

Good
Too Long

<option value="express">Express Shipping (2-3 days)</option>

<option value="express">Express Shipping - Delivered within 2-3 business days, tracking included, signature required</option>

Browser Support

Browser	Version	Notes
Chrome	1+	Full support
Firefox	1+	Full support
Safari	1+	Full support
Edge	12+	Full support
IE	3+	Full support

The <option> element has been supported since the earliest browsers.

<option> - The Option Element

The <option> Element

Quick Example

Syntax

Attributes

Core Attributes

Common Use Cases

Basic Options

Pre-selected Option

Disabled Options

Options with Different Values and Display Text

Empty First Option for Required Selects

Options Without Value Attribute

Using the Label Attribute

Options in Multiple Select

Options in Datalist

Dynamic Options with JavaScript

Adding Options Programmatically

Filtering Options

Changing Selected Option

Best Practices

Use Meaningful Values

Provide Clear Default Options

Order Options Logically

Accessibility

Avoid Disabled Selected Options

Keep Option Text Concise

Browser Support

Related Elements

The `<option>` Element