Select

Pick from a list

A select

The browser’s own list: right on every phone.

Store

Show the code

<div class="field">
<label class="label" for="se-1">Store</label>
<select class="input" id="se-1" name="se-1">
<option value="Market Street" selected>Market Street</option>
<option value="Riverside">Riverside</option>
<option value="Old Town">Old Town</option>
<option value="Harbour Kiosk">Harbour Kiosk</option>
</select>
</div>

With groups

Options in groups.

Category

Show the code

<div class="field w-100">
<label class="label" for="se-2">Category</label>
<select class="input" id="se-2">
<optgroup label="Taxed at 8%">
<option>Hot drinks</option>
<option>Cold drinks</option>
<option>Bakery</option>
</optgroup>
<optgroup label="Taxed at 5.5%">
<option>Gifts &amp; bags</option>
<option>Merchandise</option>
</optgroup>
<optgroup label="Exempt">
<option>Grocery</option>
<option>Coffee beans</option>
<option>Tea</option>
</optgroup>
</select>
</div>

Many choices

For a long list, a search: the searchable select.

Searchable select

Show the code

<a class="btn" href="searchable-select.html">
<i class="ti ti-search">
</i>Searchable select</a>