Select allows a user to select a single item from a collapsible list. Use of select helps to reduce input errors and screen space. It's commonly used to help users enter a value into a form field.
Select
<form>
<div class="field">
<label class="label" for="favcity">Choose your favourite city?</label>
<p class="control has-icons-left">
<span class="select">
<select id="favcity" name="select">
<option value="1">Amsterdam</option>
<option value="2">Buenos Aires</option>
<option value="3">Delhi</option>
<option value="4">Hong Kong</option>
<option value="5">London</option>
<option value="6">Los Angeles</option>
<option value="7">Moscow</option>
<option value="8">Mumbai</option>
<option value="9">New York</option>
<option value="10">Sao Paulo</option>
<option value="11">Tokyo</option>
</select>
</span>
<span class="icon is-small is-left">
<i class="fas fa-globe"></i>
</span>
</p>
</div>
<div class="field">
<label class="label" for="favcity2">Choose your favourite city?</label>
<p class="control has-icons-left">
<span class="select">
<select id="favcity2" name="favcity2">
<optgroup label="Asia">
<option value="3">Delhi</option>
<option value="4">Hong Kong</option>
<option value="8">Mumbai</option>
<option value="11">Tokyo</option>
</optgroup>
<optgroup label="Europe">
<option value="1">Amsterdam</option>
<option value="5">London</option>
<option value="7">Moscow</option>
</optgroup>
<optgroup label="North America">
<option value="6">Los Angeles</option>
<option value="9">New York</option>
</optgroup>
<optgroup label="South America">
<option value="2">Buenos Aires</option>
<option value="10">Sao Paulo</option>
</optgroup>
</select>
</span>
<span class="icon is-small is-left">
<i class="fas fa-globe"></i>
</span>
</p>
</div>
</form>Avoid select boxes if at all possible. Use radio buttons, checkboxes or free text boxes instead.
Reasons for avoiding:
- choices are hidden from users and interaction is needed to show all answers
- users find them hard to use and they usually contain too many options
- they can cause accessibility issues and are harder to use on a mobile device.
The following form controls classes are supported: .label, .input, .textarea, .select, .checkbox, .radio, .button, .help.
Each of them should be wrapped in a .control container.
When combining several controls in a form, use the .field class as a container, to keep the spacing consistent.
Use the <label> element to associate text and <select> form control.
Avoid using select boxes - use radio buttons or checkboxes instead,
To improve accessibility further, you could add <optgroup>, to a group of options.
It is recommended that multiple select menus be avoided. Not all browsers provide intuitive keyboard navigation for multiple select menus. Many users do not know to use CTRL/Command or Shift + click to select multiple items. Typically, a set of check box options can provide similar, yet more accessible functionality.
If you have any questions or suggestions for improvements, please contact the Web Team.