Syntax
<select>
<optgroup label="Group Name">
<option value="1">Choice One</option>
</optgroup>
</select>Examples
Options Without Grouping
A simple flat list of options.
<select name="size">
<option value="s">Small</option>
<option value="m">Medium</option>
<option value="l">Large</option>
</select>Grouped Options
Organizing related options into labeled groups.
<select name="framework">
<optgroup label="Frontend">
<option value="react">React</option>
<option value="vue">Vue</option>
</optgroup>
<optgroup label="Backend">
<option value="express">Express</option>
<option value="laravel">Laravel</option>
</optgroup>
</select>Disabled Option
Preventing a specific choice from being selected.
<select>
<option value="free">Free Plan</option>
<option value="pro" disabled>Pro Plan (coming soon)</option>
</select>Attributes
- value (string): The value submitted with the form when this option is selected
- selected (boolean): Marks this option as selected by default
- disabled (boolean): Prevents this specific option from being selected
- label (string): Used on optgroup to set the group's visible heading
Best practices
- Always set a meaningful value attribute — without one, the option's text content is submitted instead, which is easy to forget
- Use optgroup to organize dropdowns with more than roughly 8-10 options into logical categories
- Use the disabled attribute on options that are not currently available rather than removing them entirely
- Keep option text short enough to display fully in the dropdown without truncation
At a glance
- Purpose
- Structure and meaning for web content
- File extension
- .html · .htm
- Runs in
- Web browsers
- Usually used with
- CSS and JavaScript
Specifications & further reading
Related HTML documentation
<button>
The <button> element creates a clickable button that can trigger actions like submitting a form, resetting a form, or running custom JavaScript. Unlike <input type="button">, <button> can contain other HTML content such as icons or styled text, not just plain text. Its type attribute determines its default behavior within a form.<input>
The <input> element creates interactive form controls for collecting user data. Its behavior changes dramatically based on the type attribute — a single element can become a text field, checkbox, radio button, date picker, file uploader, and more. It is a void (self-closing) element with no closing tag or child content.<label>
The <label> element defines a caption for a form control, improving both usability and accessibility. Clicking a label activates or focuses its associated input — useful for small targets like checkboxes and radio buttons. Labels can be associated with an input either by wrapping it, or by using a for attribute that matches the input's id.<textarea>
The <textarea> element creates a multi-line plain-text input control, ideal for comments, messages, and any content longer than a single line. Unlike <input>, its default value is placed between the opening and closing tags rather than in a value attribute, and users can typically resize it by dragging its corner.
The <button> element creates a clickable button that can trigger actions like submitting a form, resetting a form, or running custom JavaScript. Unlike <input type="button">, <button> can contain other HTML content such as icons or styled text, not just plain text. Its type attribute determines its default behavior within a form.<input>
The <input> element creates interactive form controls for collecting user data. Its behavior changes dramatically based on the type attribute — a single element can become a text field, checkbox, radio button, date picker, file uploader, and more. It is a void (self-closing) element with no closing tag or child content.<label>
The <label> element defines a caption for a form control, improving both usability and accessibility. Clicking a label activates or focuses its associated input — useful for small targets like checkboxes and radio buttons. Labels can be associated with an input either by wrapping it, or by using a for attribute that matches the input's id.<textarea>
The <textarea> element creates a multi-line plain-text input control, ideal for comments, messages, and any content longer than a single line. Unlike <input>, its default value is placed between the opening and closing tags rather than in a value attribute, and users can typically resize it by dragging its corner.