Form

Select input

Published on

Description

The select input provides a dropdown list for single selection. Use native <select> elements — custom dropdown implementations interfere with mobile gesture controls and assistive technology.

Do not use <select multiple> — use checkboxes instead for better usability.

Example

Open in new tab
View HTML markup 
  <form method="POST" novalidate="">
  <div><label for="select">
      <hgroup>
        <h1>Select - AVOID</h1>
      </hgroup>
    </label> <span id="select-hint">Radios would be a better UX</span>
    <div><select id="select" name="select" aria-describedby="select-hint">
        <option label="Afghanistan" value="AF"></option>
        <option label="Åland Islands" value="AX"></option>
        <option label="Albania" value="AL"></option>
        <option label="Algeria" value="DZ"></option>
        <option label="American Samoa" value="AS"></option>
        <option label="Andorra" value="AD"></option>
        <option label="Angola" value="AO"></option>
        <option label="Anguilla" value="AI"></option>
        <option label="Antarctica" value="AQ"></option>
        <option label="Antigua and Barbuda" value="AG"></option>
        <option label="Argentina" value="AR"></option>
        <option label="Armenia" value="AM"></option>
        <option label="Aruba" value="AW"></option>
        <option label="Australia" value="AU"></option>
        <option label="Austria" value="AT"></option>
        <option label="Azerbaijan" value="AZ"></option>
        <option label="Bahamas" value="BS"></option>
        <option label="Bahrain" value="BH"></option>
        <option label="Bangladesh" value="BD"></option>
        <option label="Barbados" value="BB"></option>
        <option label="Belarus" value="BY"></option>
        <option label="Belgium" value="BE"></option>
        <option label="Belize" value="BZ"></option>
        <option label="Benin" value="BJ"></option>
        <option label="Bermuda" value="BM"></option>
        <option label="Bhutan" value="BT"></option>
        <option label="Bolivia, Plurinational State of" value="BO"></option>
        <option label="Bonaire, Sint Eustatius and Saba" value="BQ"></option>
        <option label="Bosnia and Herzegovina" value="BA"></option>
        <option label="Botswana" value="BW"></option>
        <option label="Bouvet Island" value="BV"></option>
        <option label="Brazil" value="BR"></option>
        <option label="British Indian Ocean Territory" value="IO"></option>
        <option label="Brunei Darussalam" value="BN"></option>
        <option label="Bulgaria" value="BG"></option>
        <option label="Burkina Faso" value="BF"></option>
        <option label="Burundi" value="BI"></option>
        <option label="Cambodia" value="KH"></option>
        <option label="Cameroon" value="CM"></option>
        <option label="Canada" value="CA"></option>
        <option label="Cape Verde" value="CV"></option>
        <option label="Cayman Islands" value="KY"></option>
        <option label="Central African Republic" value="CF"></option>
        <option label="Chad" value="TD"></option>
        <option label="Chile" value="CL"></option>
        <option label="China" value="CN"></option>
        <option label="Christmas Island" value="CX"></option>
        <option label="Cocos (Keeling) Islands" value="CC"></option>
        <option label="Colombia" value="CO"></option>
        <option label="Comoros" value="KM"></option>
        <option label="Congo" value="CG"></option>
        <option label="Congo, the Democratic Republic of the" value="CD"></option>
        <option label="Cook Islands" value="CK"></option>
        <option label="Costa Rica" value="CR"></option>
        <option label="Côte d'Ivoire" value="CI"></option>
        <option label="Croatia" value="HR"></option>
        <option label="Cuba" value="CU"></option>
        <option label="Curaçao" value="CW"></option>
        <option label="Cyprus" value="CY"></option>
        <option label="Czech Republic" value="CZ"></option>
        <option label="Denmark" value="DK"></option>
        <option label="Djibouti" value="DJ"></option>
        <option label="Dominica" value="DM"></option>
        <option label="Dominican Republic" value="DO"></option>
        <option label="Ecuador" value="EC"></option>
        <option label="Egypt" value="EG"></option>
        <option label="El Salvador" value="SV"></option>
        <option label="Equatorial Guinea" value="GQ"></option>
        <option label="Eritrea" value="ER"></option>
        <option label="Estonia" value="EE"></option>
        <option label="Ethiopia" value="ET"></option>
        <option label="Falkland Islands (Malvinas)" value="FK"></option>
        <option label="Faroe Islands" value="FO"></option>
        <option label="Fiji" value="FJ"></option>
        <option label="Finland" value="FI"></option>
        <option label="France" value="FR"></option>
        <option label="French Guiana" value="GF"></option>
        <option label="French Polynesia" value="PF"></option>
        <option label="French Southern Territories" value="TF"></option>
        <option label="Gabon" value="GA"></option>
        <option label="Gambia" value="GM"></option>
        <option label="Georgia" value="GE"></option>
        <option label="Germany" value="DE"></option>
        <option label="Ghana" value="GH"></option>
        <option label="Gibraltar" value="GI"></option>
        <option label="Greece" value="GR"></option>
        <option label="Greenland" value="GL"></option>
        <option label="Grenada" value="GD"></option>
        <option label="Guadeloupe" value="GP"></option>
        <option label="Guam" value="GU"></option>
        <option label="Guatemala" value="GT"></option>
        <option label="Guernsey" value="GG"></option>
        <option label="Guinea" value="GN"></option>
        <option label="Guinea-Bissau" value="GW"></option>
        <option label="Guyana" value="GY"></option>
        <option label="Haiti" value="HT"></option>
        <option label="Heard Island and McDonald Islands" value="HM"></option>
        <option label="Holy See (Vatican City State)" value="VA"></option>
        <option label="Honduras" value="HN"></option>
        <option label="Hong Kong" value="HK"></option>
        <option label="Hungary" value="HU"></option>
        <option label="Iceland" value="IS"></option>
        <option label="India" value="IN"></option>
        <option label="Indonesia" value="ID"></option>
        <option label="Iran, Islamic Republic of" value="IR"></option>
        <option label="Iraq" value="IQ"></option>
        <option label="Ireland" value="IE"></option>
        <option label="Isle of Man" value="IM"></option>
        <option label="Israel" value="IL"></option>
        <option label="Italy" value="IT"></option>
        <option label="Jamaica" value="JM"></option>
        <option label="Japan" value="JP"></option>
        <option label="Jersey" value="JE"></option>
        <option label="Jordan" value="JO"></option>
        <option label="Kazakhstan" value="KZ"></option>
        <option label="Kenya" value="KE"></option>
        <option label="Kiribati" value="KI"></option>
        <option label="Korea, Democratic People's Republic of" value="KP"></option>
        <option label="Korea, Republic of" value="KR"></option>
        <option label="Kuwait" value="KW"></option>
        <option label="Kyrgyzstan" value="KG"></option>
        <option label="Lao People's Democratic Republic" value="LA"></option>
        <option label="Latvia" value="LV"></option>
        <option label="Lebanon" value="LB"></option>
        <option label="Lesotho" value="LS"></option>
        <option label="Liberia" value="LR"></option>
        <option label="Libya" value="LY"></option>
        <option label="Liechtenstein" value="LI"></option>
        <option label="Lithuania" value="LT"></option>
        <option label="Luxembourg" value="LU"></option>
        <option label="Macao" value="MO"></option>
        <option label="Macedonia, the former Yugoslav Republic of" value="MK"></option>
        <option label="Madagascar" value="MG"></option>
        <option label="Malawi" value="MW"></option>
        <option label="Malaysia" value="MY"></option>
        <option label="Maldives" value="MV"></option>
        <option label="Mali" value="ML"></option>
        <option label="Malta" value="MT"></option>
        <option label="Marshall Islands" value="MH"></option>
        <option label="Martinique" value="MQ"></option>
        <option label="Mauritania" value="MR"></option>
        <option label="Mauritius" value="MU"></option>
        <option label="Mayotte" value="YT"></option>
        <option label="Mexico" value="MX"></option>
        <option label="Micronesia, Federated States of" value="FM"></option>
        <option label="Moldova, Republic of" value="MD"></option>
        <option label="Monaco" value="MC"></option>
        <option label="Mongolia" value="MN"></option>
        <option label="Montenegro" value="ME"></option>
        <option label="Montserrat" value="MS"></option>
        <option label="Morocco" value="MA"></option>
        <option label="Mozambique" value="MZ"></option>
        <option label="Myanmar" value="MM"></option>
        <option label="Namibia" value="NA"></option>
        <option label="Nauru" value="NR"></option>
        <option label="Nepal" value="NP"></option>
        <option label="Netherlands" value="NL"></option>
        <option label="New Caledonia" value="NC"></option>
        <option label="New Zealand" value="NZ"></option>
        <option label="Nicaragua" value="NI"></option>
        <option label="Niger" value="NE"></option>
        <option label="Nigeria" value="NG"></option>
        <option label="Niue" value="NU"></option>
        <option label="Norfolk Island" value="NF"></option>
        <option label="Northern Mariana Islands" value="MP"></option>
        <option label="Norway" value="NO"></option>
        <option label="Oman" value="OM"></option>
        <option label="Pakistan" value="PK"></option>
        <option label="Palau" value="PW"></option>
        <option label="Palestinian Territory, Occupied" value="PS"></option>
        <option label="Panama" value="PA"></option>
        <option label="Papua New Guinea" value="PG"></option>
        <option label="Paraguay" value="PY"></option>
        <option label="Peru" value="PE"></option>
        <option label="Philippines" value="PH"></option>
        <option label="Pitcairn" value="PN"></option>
        <option label="Poland" value="PL"></option>
        <option label="Portugal" value="PT"></option>
        <option label="Puerto Rico" value="PR"></option>
        <option label="Qatar" value="QA"></option>
        <option label="Réunion" value="RE"></option>
        <option label="Romania" value="RO"></option>
        <option label="Russian Federation" value="RU"></option>
        <option label="Rwanda" value="RW"></option>
        <option label="Saint Barthélemy" value="BL"></option>
        <option label="Saint Helena, Ascension and Tristan da Cunha" value="SH"></option>
        <option label="Saint Kitts and Nevis" value="KN"></option>
        <option label="Saint Lucia" value="LC"></option>
        <option label="Saint Martin (French part)" value="MF"></option>
        <option label="Saint Pierre and Miquelon" value="PM"></option>
        <option label="Saint Vincent and the Grenadines" value="VC"></option>
        <option label="Samoa" value="WS"></option>
        <option label="San Marino" value="SM"></option>
        <option label="Sao Tome and Principe" value="ST"></option>
        <option label="Saudi Arabia" value="SA"></option>
        <option label="Senegal" value="SN"></option>
        <option label="Serbia" value="RS"></option>
        <option label="Seychelles" value="SC"></option>
        <option label="Sierra Leone" value="SL"></option>
        <option label="Singapore" value="SG"></option>
        <option label="Sint Maarten (Dutch part)" value="SX"></option>
        <option label="Slovakia" value="SK"></option>
        <option label="Slovenia" value="SI"></option>
        <option label="Solomon Islands" value="SB"></option>
        <option label="Somalia" value="SO"></option>
        <option label="South Africa" value="ZA"></option>
        <option label="South Georgia and the South Sandwich Islands" value="GS"></option>
        <option label="South Sudan" value="SS"></option>
        <option label="Spain" value="ES"></option>
        <option label="Sri Lanka" value="LK"></option>
        <option label="Sudan" value="SD"></option>
        <option label="Suriname" value="SR"></option>
        <option label="Svalbard and Jan Mayen" value="SJ"></option>
        <option label="Swaziland" value="SZ"></option>
        <option label="Sweden" value="SE"></option>
        <option label="Switzerland" value="CH"></option>
        <option label="Syrian Arab Republic" value="SY"></option>
        <option label="Taiwan, Province of China" value="TW"></option>
        <option label="Tajikistan" value="TJ"></option>
        <option label="Tanzania, United Republic of" value="TZ"></option>
        <option label="Thailand" value="TH"></option>
        <option label="Timor-Leste" value="TL"></option>
        <option label="Togo" value="TG"></option>
        <option label="Tokelau" value="TK"></option>
        <option label="Tonga" value="TO"></option>
        <option label="Trinidad and Tobago" value="TT"></option>
        <option label="Tunisia" value="TN"></option>
        <option label="Turkey" value="TR"></option>
        <option label="Turkmenistan" value="TM"></option>
        <option label="Turks and Caicos Islands" value="TC"></option>
        <option label="Tuvalu" value="TV"></option>
        <option label="Uganda" value="UG"></option>
        <option label="Ukraine" value="UA"></option>
        <option label="United Arab Emirates" value="AE"></option>
        <option label="United Kingdom" value="GB"></option>
        <option label="United States" value="US"></option>
        <option label="United States Minor Outlying Islands" value="UM"></option>
        <option label="Uruguay" value="UY"></option>
        <option label="Uzbekistan" value="UZ"></option>
        <option label="Vanuatu" value="VU"></option>
        <option label="Venezuela, Bolivarian Republic of" value="VE"></option>
        <option label="Viet Nam" value="VN"></option>
        <option label="Virgin Islands, British" value="VG"></option>
        <option label="Virgin Islands, U.S." value="VI"></option>
        <option label="Wallis and Futuna" value="WF"></option>
        <option label="Western Sahara" value="EH"></option>
        <option label="Yemen" value="YE"></option>
        <option label="Zambia" value="ZM"></option>
        <option label="Zimbabwe" value="ZW"></option>
      </select></div>
  </div> <button type="button">Submit</button>
  <p>Need help? <a href="/form/input-select" target="_top">View our guidance </a></p>
</form>

Accessibility

  • Use native <select> with minimal CSS styling. Custom arrows via appearance: none + background SVG.
  • Inherit typography: font: inherit; letter-spacing: inherit; word-spacing: inherit;.
  • Use explicit <label for="id"> association.
  • Mirror directional styles for RTL support.

References

Variables

None for input