Form Control
HTML 4.0
The optgroup element groups related options within a <select> dropdown menu. It creates visual categories with labels that help organize long lists of options.
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="destination">Travel Destination:</label>
<select id="destination" name="destination">
<option value="">Choose destination</option>
<optgroup label="Europe">
<option value="paris">Paris, France</option>
<option value="london">London, UK</option>
<option value="rome">Rome, Italy</option>
</optgroup>
<optgroup label="Asia">
<option value="tokyo">Tokyo, Japan</option>
<option value="bangkok">Bangkok, Thailand</option>
<option value="singapore">Singapore</option>
</optgroup>
</select>
</form>
< optgroup label = " Group Name " >
< option value = " value1 " > Option 1 </ option >
< option value = " value2 " > Option 2 </ option >
The label attribute provides the heading for the option group.
Attribute Description Example labelLabel for the option group (required) label="Category"disabledDisables all options in the group disabled
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="product">Product Category:</label>
<select id="product" name="product">
<option value="">Select a product</option>
<optgroup label="Electronics">
<option value="laptop">Laptop</option>
<option value="phone">Smartphone</option>
<option value="tablet">Tablet</option>
</optgroup>
<optgroup label="Clothing">
<option value="shirt">T-Shirt</option>
<option value="jeans">Jeans</option>
<option value="jacket">Jacket</option>
</optgroup>
<optgroup label="Books">
<option value="fiction">Fiction</option>
<option value="nonfiction">Non-Fiction</option>
<option value="textbook">Textbook</option>
</optgroup>
</select>
</form>
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="country">Country:</label>
<select id="country" name="country" required>
<option value="">Select country</option>
<optgroup label="North America">
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="mx">Mexico</option>
</optgroup>
<optgroup label="Europe">
<option value="uk">United Kingdom</option>
<option value="de">Germany</option>
<option value="fr">France</option>
<option value="es">Spain</option>
</optgroup>
<optgroup label="Asia">
<option value="jp">Japan</option>
<option value="cn">China</option>
<option value="in">India</option>
<option value="sg">Singapore</option>
</optgroup>
</select>
</form>
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="language">Programming Language:</label>
<select id="language" name="language">
<option value="">Choose language</option>
<optgroup label="Frontend">
<option value="js">JavaScript</option>
<option value="ts">TypeScript</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
</optgroup>
<optgroup label="Backend">
<option value="python">Python</option>
<option value="java">Java</option>
<option value="csharp">C#</option>
<option value="php">PHP</option>
<option value="ruby">Ruby</option>
</optgroup>
<optgroup label="Mobile">
<option value="swift">Swift</option>
<option value="kotlin">Kotlin</option>
<option value="dart">Dart</option>
</optgroup>
</select>
</form>
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>
<optgroup label="Available Plans">
<option value="free">Free - $0/month</option>
<option value="basic">Basic - $9/month</option>
<option value="pro">Pro - $29/month</option>
</optgroup>
<optgroup label="Enterprise Plans (Contact Sales)" disabled>
<option value="team">Team - Custom pricing</option>
<option value="enterprise">Enterprise - Custom pricing</option>
</optgroup>
</select>
</form>
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="payment">Payment Method:</label>
<select id="payment" name="payment">
<option value="">Select payment method</option>
<optgroup label="Credit Cards">
<option value="visa">Visa</option>
<option value="mastercard">Mastercard</option>
<option value="amex">American Express</option>
</optgroup>
<optgroup label="Digital Wallets">
<option value="paypal">PayPal</option>
<option value="applepay">Apple Pay</option>
<option value="googlepay">Google Pay</option>
</optgroup>
<option value="bank">Bank Transfer</option>
<option value="cash">Cash on Delivery</option>
</select>
</form>
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="car">Vehicle:</label>
<select id="car" name="car">
<option value="">Select vehicle</option>
<optgroup label="Sedans">
<option value="camry">Toyota Camry</option>
<option value="accord">Honda Accord</option>
<option value="civic">Honda Civic</option>
</optgroup>
<optgroup label="SUVs">
<option value="crv">Honda CR-V</option>
<option value="rav4">Toyota RAV4</option>
<option value="explorer">Ford Explorer</option>
</optgroup>
<optgroup label="Trucks">
<option value="f150">Ford F-150</option>
<option value="silverado">Chevy Silverado</option>
<option value="tacoma">Toyota Tacoma</option>
</optgroup>
<optgroup label="Electric Vehicles">
<option value="model3">Tesla Model 3</option>
<option value="modelx">Tesla Model X</option>
<option value="leaf">Nissan Leaf</option>
</optgroup>
</select>
</form>
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="skills">Select Your Skills:</label>
<select id="skills" name="skills" multiple size="10">
<optgroup label="Programming Languages">
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
<option value="java">Java</option>
</optgroup>
<optgroup label="Frameworks">
<option value="react">React</option>
<option value="vue">Vue</option>
<option value="angular">Angular</option>
</optgroup>
<optgroup label="Tools">
<option value="git">Git</option>
<option value="docker">Docker</option>
<option value="kubernetes">Kubernetes</option>
</optgroup>
</select>
<small>Hold Ctrl/Cmd to select multiple</small>
</form>
Interactive code playground requires JavaScript. Here's the code:
<style>
.styled-select {
padding: 8px;
border: 2px solid #e5e7eb;
border-radius: 6px;
font-size: 16px;
}
.styled-select optgroup {
font-weight: bold;
font-style: normal;
color: #1f2937;
}
.styled-select option {
padding-left: 10px;
font-weight: normal;
}
</style>
<form>
<label for="styled-group">Styled Groups:</label>
<select id="styled-group" class="styled-select">
<option value="">Select option</option>
<optgroup label="Group 1">
<option value="a">Option A</option>
<option value="b">Option B</option>
</optgroup>
<optgroup label="Group 2">
<option value="c">Option C</option>
<option value="d">Option D</option>
</optgroup>
</select>
</form>
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="dynamic-group">Dynamic Groups:</label>
<select id="dynamic-group">
<option value="">Loading...</option>
</select>
<button type="button" onclick="loadGroups()">Load Groups</button>
</form>
<script>
function loadGroups() {
const data = {
'Fruits': ['Apple', 'Banana', 'Cherry'],
'Vegetables': ['Carrot', 'Broccoli', 'Spinach'],
'Grains': ['Rice', 'Wheat', 'Oats']
};
const select = document.getElementById('dynamic-group');
select.innerHTML = '<option value="">Choose food</option>';
Object.keys(data).forEach(groupName => {
const optgroup = document.createElement('optgroup');
optgroup.label = groupName;
data[groupName].forEach(item => {
const option = document.createElement('option');
option.value = item.toLowerCase();
option.textContent = item;
optgroup.appendChild(option);
});
select.appendChild(optgroup);
});
}
</script>
< optgroup label = " California " >
< option value = " la " > Los Angeles </ option >
< option value = " sf " > San Francisco </ option >
< option value = " sd " > San Diego </ option >
< option value = " houston " > Houston </ option >
< option value = " austin " > Austin </ option >
< option value = " dallas " > Dallas </ option >
< option value = " la " > Los Angeles, CA </ option >
< option value = " sf " > San Francisco, CA </ option >
< option value = " houston " > Houston, TX </ option >
< option value = " austin " > Austin, TX </ option >
< option value = " sd " > San Diego, CA </ option >
< option value = " dallas " > Dallas, TX </ option >
< optgroup label = " Europe " >
< optgroup label = " European Countries and Territories " >
If you only have 3-5 options total, grouping may be unnecessary:
< option value = " low " > Low </ option >
< option value = " medium " > Medium </ option >
< option value = " high " > High </ option >
< optgroup label = " Priority Levels " >
< option value = " low " > Low </ option >
< option value = " medium " > Medium </ option >
< option value = " high " > High </ option >
Screen readers announce the group label before each option, helping users understand the context:
< optgroup label = " Breakfast Items " >
< option value = " eggs " > Eggs </ option >
< option value = " pancakes " > Pancakes </ option >
Screen reader announces: “Breakfast Items, Eggs” and “Breakfast Items, Pancakes”
Remember that <optgroup> labels are headers, not selectable options:
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="menu">Menu:</label>
<select id="menu" name="menu" required>
<option value="">Make a selection</option>
<optgroup label="Appetizers (not selectable)">
<option value="wings">Chicken Wings</option>
<option value="nachos">Nachos</option>
</optgroup>
<optgroup label="Entrees (not selectable)">
<option value="burger">Burger</option>
<option value="pasta">Pasta</option>
</optgroup>
</select>
</form>
When disabling a group, make it clear why:
< optgroup label = " Standard Plans " >
< option value = " basic " > Basic </ option >
< option value = " pro " > Pro </ option >
< optgroup label = " Enterprise (Contact Sales) " disabled >
< option value = " team " > Team </ option >
< option value = " enterprise " > Enterprise </ option >
Browser Version Notes Chrome 1+ Full support Firefox 1+ Full support Safari 1+ Full support Edge 12+ Full support IE 5.5+ Full support
The <optgroup> element has been widely supported since IE 5.5 and early versions of other browsers.
