Definition
The <option>
tag is used to define an item in a <select>
, <optgroup>
, or <datalist>
element.
Example
<label for="song-select">Choose a song:</label>
<select id="song-select">
<optgroup label="Oasis">
<option>Wonderwall</option>
<option>Don't look back in anger</option>
<option>Supersonic</option>
</optgroup>
<optgroup label="Beetles">
<option>Here comes the sun</option>
<option>Hey Jude</option>
<option>Let it be</option>
</optgroup>
</select>
Usage
- The
<option>
element can be used as a child of a<select>
,<datalist>
, or<optgroup>
element. - An opening tag is required. If the
<option>
element is immediately followed by another<option>
, or a<optgroup>
element, or if there is no more content, the closing tag can be omitted. - Only text is permitted content.
Attributes
The <option>
element supports the Global Attributes, along with the following:
disabled
The
disabled
attribute is a boolean that determines whether the group of<option>
elements is disabled.label
The
label
attribute represents the meaning of the option. If this attribute is used, it must not be left empty. If omitted, the<option>
content will be used.selected
The
selected
attribute is a boolean that indicates whether the option is the default selected when the page loads. Only one<option>
may have this attribute.value
The
value
attribute specifies the value to be sent to the server if the option is selected. If this attribute is omitted, the<option>
content will be used.
Best Practices
- You can group long lists of items using the
<optgroup>
tag.
Specification
Browser Support
Desktop
Chrome | Edge | Firefox | IE | Opera | Safari |
---|---|---|---|---|---|
Yes | Yes | Yes | Yes | Yes | Yes |
Mobile
Android Webview | Chrome Android | Firefox Android | Opera Android | iOS Safari | Samsung Internet |
---|---|---|---|---|---|
Yes | Yes | Yes | Yes | Yes | Yes |