Product Name

Dropdown

Show Code 
<select class="ui dropdown">
  <option value="">Gender</option>
  <option value="1">Male</option>
  <option value="0">Female</option>
</select>

<script type="text/javascript">
  $('.ui.dropdown').dropdown();
</script>
Dropdown using <div>
Gender
Male
Female
Show Code 
<div class="ui selection dropdown">
  <input type="hidden" name="gender">
  <i class="dropdown icon"></i>
  <div class="default text">Gender</div>
  <div class="menu">
    <div class="item" data-value="1">Male</div>
    <div class="item" data-value="0">Female</div>
  </div>
</div>

<script type="text/javascript">
  $('.ui.dropdown').dropdown();
</script>

Floating Dropdown

Show Code 
<select class="ui floating dropdown">
  <option value="">Select a State</option>
  <option value="0">Alabama</option>
  <option value="1">Alaska</option>
  ...
</select>

<script type="text/javascript">
  $('.ui.dropdown').dropdown();
</script>
Basic Floating
Select a State
All
Alabama
Alaska
Arizona
Arkansas
California
Colorado
Colorado
Show Code 
<div class="ui dropdown floating button">
  <span class="text">Select a State</span>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item">
      <span class="text">All</span>
    </div>
    <div class="item">
      <span class="text">Alabama</span>
    </div>
    ...
  </div>
</div>

<script type="text/javascript">
  $('.ui.dropdown').dropdown();
</script>
Floating dropdown using <div>
Select a State
All
Alabama
Alaska
Arizona
Arkansas
California
Colorado
Colorado
Show Code 
<div class="ui dropdown floating">
  <span class="text">Select a State</span>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item">
      <span class="text">All</span>
    </div>
    <div class="item">
      <span class="text">Alabama</span>
    </div>
    <div class="item">
      <span class="text">Alaska</span>
    </div>
    ...
  </div>
</div>

<script type="text/javascript">
  $('.ui.dropdown').dropdown();
</script>

Searchable Dropdown

Show Code 
<div id="search" class="ui search selection dropdown">
  <input type="hidden" name="country">
  <div class="default text">Select Country</div>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="header">
      HEADER 1
    </div>
    <div class="scrolling menu">
      <div class="item" data-value="af">Afghanistan stan</div>
      <div class="item" data-value="ax">Aland Islands</div>
      ...
    </div>
    <div class="header">
      HEADER 2
    </div>
    <div class="scrolling menu">
      <div class="item" data-value="am">Armenia</div>
      <div class="item" data-value="aw">Aruba</div>
      ...
    </div>
    ...
  </div>
</div>

<script type="text/javascript">
  $(document).ready(function(){
    $('#search').dropdown({
      fullTextSearch: 'exact',
      match: 'text'
    });
  })
</script>

Multiple Select

This example allows multiple selections but does not allow custom addtions
Skills
Angular
CSS
Graphic Design
Ember
HTML
Information Architecture
Javascript
Mechanical Engineering
Meteor
NodeJS
Plumbing
Python
Rails
React
Kitchen Repair
Ruby
UI Design
User Experience
Show Code 
  <div class="ui multiple search selection dropdown">
    <input name="tags" type="hidden">
    <i class="dropdown icon"></i>
    <div class="default text">Skills</div>
    <div class="menu">
      <div class="item" data-value="angular">Angular</div>
      <div class="item" data-value="css">CSS</div>
      <div class="item" data-value="design">Graphic Design</div>
      <div class="item" data-value="ember">Ember</div>
      <div class="item" data-value="html">HTML</div>
      <div class="item" data-value="ia">Information Architecture</div>
      <div class="item" data-value="javascript">Javascript</div>
      <div class="item" data-value="mech">Mechanical Engineering</div>
      <div class="item" data-value="meteor">Meteor</div>
      <div class="item" data-value="node">NodeJS</div>
      <div class="item" data-value="plumbing">Plumbing</div>
      <div class="item" data-value="python">Python</div>
      <div class="item" data-value="rails">Rails</div>
      <div class="item" data-value="react">React</div>
      <div class="item" data-value="repair">Kitchen Repair</div>
      <div class="item" data-value="ruby">Ruby</div>
      <div class="item" data-value="ui">UI Design</div>
      <div class="item" data-value="ux">User Experience</div>
    </div>
  </div>

Allowing additions

Using allowAdditions: true gives users the ability to add their own options. This can work with either single or multiple search select dropdowns

Although all dropdowns support select initialization, custom choices will not be saved on page refresh unless you use a hidden input. This is because option created dynamically are not preserved on page refresh.

Single selection

Allow user to select a single option or add a new option

Show Code 
  <div class="ui search selection dropdown" id="singleSelectAllowAddition">
    <input name="tags" type="hidden">
    <i class="dropdown icon"></i>
    <div class="default text">Skills</div>
    <div class="menu">
      <div class="item" data-value="angular">Angular</div>
      <div class="item" data-value="css">CSS</div>
      <div class="item" data-value="design">Graphic Design</div>
      <div class="item" data-value="ember">Ember</div>
      <div class="item" data-value="html">HTML</div>
      <div class="item" data-value="ia">Information Architecture</div>
      <div class="item" data-value="javascript">Javascript</div>
      <div class="item" data-value="mech">Mechanical Engineering</div>
      <div class="item" data-value="meteor">Meteor</div>
      <div class="item" data-value="node">NodeJS</div>
      <div class="item" data-value="plumbing">Plumbing</div>
      <div class="item" data-value="python">Python</div>
      <div class="item" data-value="rails">Rails</div>
      <div class="item" data-value="react">React</div>
      <div class="item" data-value="repair">Kitchen Repair</div>
      <div class="item" data-value="ruby">Ruby</div>
      <div class="item" data-value="ui">UI Design</div>
      <div class="item" data-value="ux">User Experience</div>
    </div>
  </div>
  <script type="text/javascript">
    $('#singleSelectAllowAddition').dropdown({
      allowAdditions: true
    });
  </script>

Allow multiple selections

Allows the user to select multiple options, as well as create their own

Show Code 
  <div class="ui multiple search selection dropdown" id="multiSelectAllowAddition">
    <input name="tags" type="hidden">
    <i class="dropdown icon"></i>
    <div class="default text">Skills</div>
    <div class="menu">
      <div class="item" data-value="angular">Angular</div>
      <div class="item" data-value="css">CSS</div>
      <div class="item" data-value="design">Graphic Design</div>
      <div class="item" data-value="ember">Ember</div>
      <div class="item" data-value="html">HTML</div>
      <div class="item" data-value="ia">Information Architecture</div>
      <div class="item" data-value="javascript">Javascript</div>
      <div class="item" data-value="mech">Mechanical Engineering</div>
      <div class="item" data-value="meteor">Meteor</div>
      <div class="item" data-value="node">NodeJS</div>
      <div class="item" data-value="plumbing">Plumbing</div>
      <div class="item" data-value="python">Python</div>
      <div class="item" data-value="rails">Rails</div>
      <div class="item" data-value="react">React</div>
      <div class="item" data-value="repair">Kitchen Repair</div>
      <div class="item" data-value="ruby">Ruby</div>
      <div class="item" data-value="ui">UI Design</div>
      <div class="item" data-value="ux">User Experience</div>
    </div>
  </div>
  <script type="text/javascript">
    $('#multiSelectAllowAddition').dropdown({
      allowAdditions: true
    });
  </script>