Single Select

• Docs
• API

This component is compatible with the standard <form> element. For more information on form submission and client-side validation, please refer to the Working with forms section.

Basic example

Lorem Ipsum Dolor

HTML

<vscode-single-select id="select-example">
  <vscode-option description="Consectetur adipiscing elit">Lorem</vscode-option>
  <vscode-option selected description="Donec elit odio">Ipsum</vscode-option>
  <vscode-option description="Aliquam ac vulputate eros">Dolor</vscode-option>
</vscode-single-select>

JavaScript

const select = document.querySelector('#select-example');

select.addEventListener('change', (event) => {
  console.log(select.value);
});

Combobox mode

Search method: contains fuzzy startsWith startsWithPerTerm

Afghanistan Albania Algeria Andorra Angola Antigua and Barbuda Argentina Armenia Australia Austria Azerbaijan Bahamas Bahrain Bangladesh Barbados Belarus Belgium Belize Benin Bhutan Bolivia Bosnia and Herzegovina Botswana Brazil Brunei Bulgaria Burkina Faso Burundi Côte d'Ivoire Cabo Verde Cambodia Cameroon Canada Central African Republic Chad Chile China Colombia Comoros Congo (Congo-Brazzaville) Costa Rica Croatia Cuba Cyprus Czechia (Czech Republic) Democratic Republic of the Congo Denmark Djibouti Dominica Dominican Republic Ecuador Egypt El Salvador Equatorial Guinea Eritrea Estonia Eswatini (fmr. "Swaziland") Ethiopia Fiji Finland France Gabon Gambia Georgia Germany Ghana Greece Grenada Guatemala Guinea Guinea-Bissau Guyana Haiti Holy See Honduras Hungary Iceland India Indonesia Iran Iraq Ireland Israel Italy Jamaica Japan Jordan Kazakhstan Kenya Kiribati Kuwait Kyrgyzstan Laos Latvia Lebanon Lesotho Liberia Libya Liechtenstein Lithuania Luxembourg Madagascar Malawi Malaysia Maldives Mali Malta Marshall Islands Mauritania Mauritius Mexico Micronesia Moldova Monaco Mongolia Montenegro Morocco Mozambique Myanmar (formerly Burma) Namibia Nauru Nepal Netherlands New Zealand Nicaragua Niger Nigeria North Korea North Macedonia Norway Oman Pakistan Palau Palestine State Panama Papua New Guinea Paraguay Peru Philippines Poland Portugal Qatar Romania Russia Rwanda Saint Kitts and Nevis Saint Lucia Saint Vincent and the Grenadines Samoa San Marino Sao Tome and Principe Saudi Arabia Senegal Serbia Seychelles Sierra Leone Singapore Slovakia Slovenia Solomon Islands Somalia South Africa South Korea South Sudan Spain Sri Lanka Sudan Suriname Sweden Switzerland Syria Tajikistan Tanzania Thailand Timor-Leste Togo Tonga Trinidad and Tobago Tunisia Turkey Turkmenistan Tuvalu Uganda Ukraine United Arab Emirates United Kingdom United States of America Uruguay Uzbekistan Vanuatu Venezuela Vietnam Yemen Zambia Zimbabwe

HTML

<p>
  <label for="search-method">Search method:</label>
  <select name="search-method-selector" id="search-method-selector">
    <option value="contains">contains</option>
    <option value="fuzzy">fuzzy</option>
    <option value="startsWith">startsWith</option>
    <option value="startsWithPerTerm">startsWithPerTerm</option>
  </select>
</p>

<vscode-single-select id="combobox-example" combobox>
  <vscode-option>Afghanistan</vscode-option>
  <vscode-option>Albania</vscode-option>
  ...
</vscode-single-select>

JavaScript

const cb = document.querySelector("#combobox-example");
const sl = document.querySelector("#search-method-selector");

sl.addEventListener("change", () => {
  cb.filter = sl.options[sl.selectedIndex].value;
});

cb.filter = sl.options[sl.selectedIndex].value;

Creatable

If creatable is enabled in combobox mode, the user can add new options to the component. If the search field is not empty, an additional option will appear at the bottom of the list, allowing the user to extend the existing options.

Afghanistan Albania Algeria Andorra Angola Antigua and Barbuda Argentina Armenia Australia Austria Azerbaijan Bahamas Bahrain Bangladesh Barbados Belarus Belgium Belize Benin Bhutan Bolivia Bosnia and Herzegovina Botswana Brazil Brunei Bulgaria Burkina Faso Burundi Côte d'Ivoire Cabo Verde Cambodia Cameroon Canada Central African Republic Chad Chile China Colombia Comoros Congo (Congo-Brazzaville) Costa Rica Croatia Cuba Cyprus Czechia (Czech Republic) Democratic Republic of the Congo Denmark Djibouti Dominica Dominican Republic Ecuador Egypt El Salvador Equatorial Guinea Eritrea Estonia Eswatini (fmr. "Swaziland") Ethiopia Fiji Finland France Gabon Gambia Georgia Germany Ghana Greece Grenada Guatemala Guinea Guinea-Bissau Guyana Haiti Holy See Honduras Hungary Iceland India Indonesia Iran Iraq Ireland Israel Italy Jamaica Japan Jordan Kazakhstan Kenya Kiribati Kuwait Kyrgyzstan Laos Latvia Lebanon Lesotho Liberia Libya Liechtenstein Lithuania Luxembourg Madagascar Malawi Malaysia Maldives Mali Malta Marshall Islands Mauritania Mauritius Mexico Micronesia Moldova Monaco Mongolia Montenegro Morocco Mozambique Myanmar (formerly Burma) Namibia Nauru Nepal Netherlands New Zealand Nicaragua Niger Nigeria North Korea North Macedonia Norway Oman Pakistan Palau Palestine State Panama Papua New Guinea Paraguay Peru Philippines Poland Portugal Qatar Romania Russia Rwanda Saint Kitts and Nevis Saint Lucia Saint Vincent and the Grenadines Samoa San Marino Sao Tome and Principe Saudi Arabia Senegal Serbia Seychelles Sierra Leone Singapore Slovakia Slovenia Solomon Islands Somalia South Africa South Korea South Sudan Spain Sri Lanka Sudan Suriname Sweden Switzerland Syria Tajikistan Tanzania Thailand Timor-Leste Togo Tonga Trinidad and Tobago Tunisia Turkey Turkmenistan Tuvalu Uganda Ukraine United Arab Emirates United Kingdom United States of America Uruguay Uzbekistan Vanuatu Venezuela Vietnam Yemen Zambia Zimbabwe

HTML

<vscode-single-select combobox creatable>
  <vscode-option>Afghanistan</vscode-option>
  <vscode-option>Albania</vscode-option>
  <vscode-option>Algeria</vscode-option>
  ...
</vscode-single-select>