Vitreo
Forms

Select

Pick from a list, or type to find

Native

The browser’s own list, best on phones.

Code 
<div>
  <label class="form-label" for="sel-1">Country</label>
  <select id="sel-1" name="sel-1" class="select">
    <option value="Australia">Australia</option>
    <option value="Brazil">Brazil</option>
    <option value="Canada">Canada</option>
    <option value="Denmark">Denmark</option>
    <option value="Egypt">Egypt</option>
    <option value="France">France</option>
    <option value="Germany">Germany</option>
    <option value="India">India</option>
    <option value="Japan">Japan</option>
    <option value="Kenya">Kenya</option>
    <option value="Mexico">Mexico</option>
    <option value="Netherlands">Netherlands</option>
    <option value="Norway">Norway</option>
    <option value="Portugal">Portugal</option>
    <option value="Spain">Spain</option>
    <option value="Sweden" selected>Sweden</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="United States">United States</option>
  </select>
</div>

Searchable

Type to filter, arrows to move, Enter to pick.

Code 
<div>
  <label class="form-label" for="sel-2">Country</label>
  <div class="combobox" data-combobox>
    <div class="field">
      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>
      <input id="sel-2" type="text" role="combobox" aria-expanded="false" aria-controls="sel-2-list" aria-autocomplete="list" autocomplete="off" placeholder="Type to search">
      <button type="button" class="field-btn" tabindex="-1" aria-label="Show options" data-combo-toggle><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
    </div>
    <ul class="combo-list glass" id="sel-2-list" role="listbox" hidden aria-label="Countries">
      <li role="option" id="sel-2-o0" aria-selected="false" data-value="Australia"><span>Australia</span></li>
      <li role="option" id="sel-2-o1" aria-selected="false" data-value="Brazil"><span>Brazil</span></li>
      <li role="option" id="sel-2-o2" aria-selected="false" data-value="Canada"><span>Canada</span></li>
      <li role="option" id="sel-2-o3" aria-selected="false" data-value="Denmark"><span>Denmark</span></li>
      <li role="option" id="sel-2-o4" aria-selected="false" data-value="Egypt"><span>Egypt</span></li>
      <li role="option" id="sel-2-o5" aria-selected="false" data-value="France"><span>France</span></li>
      <li role="option" id="sel-2-o6" aria-selected="false" data-value="Germany"><span>Germany</span></li>
      <li role="option" id="sel-2-o7" aria-selected="false" data-value="India"><span>India</span></li>
      <li role="option" id="sel-2-o8" aria-selected="false" data-value="Japan"><span>Japan</span></li>
      <li role="option" id="sel-2-o9" aria-selected="false" data-value="Kenya"><span>Kenya</span></li>
      <li role="option" id="sel-2-o10" aria-selected="false" data-value="Mexico"><span>Mexico</span></li>
      <li role="option" id="sel-2-o11" aria-selected="false" data-value="Netherlands"><span>Netherlands</span></li>
      <li role="option" id="sel-2-o12" aria-selected="false" data-value="Norway"><span>Norway</span></li>
      <li role="option" id="sel-2-o13" aria-selected="false" data-value="Portugal"><span>Portugal</span></li>
      <li role="option" id="sel-2-o14" aria-selected="false" data-value="Spain"><span>Spain</span></li>
      <li role="option" id="sel-2-o15" aria-selected="false" data-value="Sweden"><span>Sweden</span></li>
      <li role="option" id="sel-2-o16" aria-selected="false" data-value="United Kingdom"><span>United Kingdom</span></li>
      <li role="option" id="sel-2-o17" aria-selected="false" data-value="United States"><span>United States</span></li>
      <li class="combo-empty" hidden>No matches</li>
    </ul>
  </div>
</div>

With details

Code 
<div>
  <label class="form-label" for="sel-3">Assignee</label>
  <div class="combobox" data-combobox>
    <div class="field">
      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>
      <input id="sel-3" type="text" role="combobox" aria-expanded="false" aria-controls="sel-3-list" aria-autocomplete="list" autocomplete="off" placeholder="Type to search">
      <button type="button" class="field-btn" tabindex="-1" aria-label="Show options" data-combo-toggle><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
    </div>
    <ul class="combo-list glass" id="sel-3-list" role="listbox" hidden aria-label="People">
      <li role="option" id="sel-3-o0" aria-selected="false" data-value="1"><span>Maya Lindqvist</span><small>Product Designer</small></li>
      <li role="option" id="sel-3-o1" aria-selected="false" data-value="2"><span>Theo Okafor</span><small>Engineering Lead</small></li>
      <li role="option" id="sel-3-o2" aria-selected="false" data-value="3"><span>Ines Carvalho</span><small>Account Executive</small></li>
      <li role="option" id="sel-3-o3" aria-selected="false" data-value="4"><span>Rahul Mehta</span><small>Data Analyst</small></li>
      <li role="option" id="sel-3-o4" aria-selected="false" data-value="5"><span>Hana Sato</span><small>Support Lead</small></li>
      <li role="option" id="sel-3-o5" aria-selected="false" data-value="6"><span>Lucas Moreau</span><small>Frontend Engineer</small></li>
      <li role="option" id="sel-3-o6" aria-selected="false" data-value="7"><span>Amara Nwosu</span><small>Marketing Manager</small></li>
      <li role="option" id="sel-3-o7" aria-selected="false" data-value="8"><span>Elena Petrova</span><small>Finance Manager</small></li>
      <li class="combo-empty" hidden>No matches</li>
    </ul>
  </div>
</div>

Sizes

Code 
<select id="sel-4" name="sel-4" class="select select-sm" aria-label="Small">
  <option value="Small">Small</option>
</select>
<select id="sel-5" name="sel-5" class="select" aria-label="Default">
  <option value="Default">Default</option>
</select>
<select id="sel-6" name="sel-6" class="select select-lg" aria-label="Large">
  <option value="Large">Large</option>
</select>
© Vitreo. All rights reserved.