Dropdown

Used as a list of options that a user can select from. These selections can fill in a form, filter, or sort content.

Label

HTML


<label for="single-select-label">Label</label> 
<select name="single-select-label" id="single-select-label" class="custom-select" placeholder="Select Option" data-single-select>
  <option value="one">This is one option</option>
  <option value="two">This is another option</option>
  <option value="three">This is an option on hover</option>
  <option value="four">This is another option</option>
</select>

Label

HTML

                
<label>Label</label>
<select name="multi-select-label" id="multi-select-label" class="custom-select" multiple data-multi-select>
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
  <option value="four">Four</option>
</select>

Label

HTML


<label for="search-select-label">Label</label>
<select name="search-select-label" id="search-select-label" class="custom-select" placeholder="Select Option" data-search-select>
  <option value="one">This is one option</option>
  <option value="two">This is another option</option>
  <option value="three">This is an option on hover</option>
  <option value="four">This is another option</option>
</select>

HTML

                
<select name="single-select" id="single-select" class="custom-select" placeholder="Select Option" data-single-select>
  <option value="one">This is one option</option>
  <option value="two">This is another option</option>
  <option value="three">This is an option on hover</option>
  <option value="four">This is another option</option>
</select>

HTML

                
<select name="multi-select" id="multi-select" class="custom-select" multiple data-multi-select>
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
  <option value="four">Four</option>
</select>

HTML

                
<select name="search-select" id="search-select" class="custom-select" placeholder="Select Option" data-search-select>
  <option value="one">This is one option</option>
  <option value="two">This is another option</option>
  <option value="three">This is an option on hover</option>
  <option value="four">This is another option</option>
</select>

Dropdown List

HTML


<select name="multi-select" id="multi-select-list" class="custom-select-list multi-select-search" multiple data-multi-select-search>
  <option value="one1" class="no-icon">This is one option</option>
  <option value="two" class="no-icon filled">This is a filled option</option>
  <option value="three" class="active">This is the active/selected option</option>
  <option value="four">This is a checkbox option</option>
  <option value="five" class="no-icon hover">This is for a hover option</option>
  <option value="six" class="no-icon hover2">This is for another hover option</option>
  <option value="seven" class="radio">This is a radio button option</option>
  <option value="eight" class="home">This is home/arrow option</option>
  <option value="nine" class="home active">This is home/arrow option active</option>
  <option value="nine" class="home filled">This is home/arrow option filled</option>
</select>