Select

Examples


<label for="s1" class="label">Select</label>
<select class="select" id="s1">
  <option value="Banana" selected="selected">Banana</option>
  <option value="Ananas">Ananas</option>
  <option value="Papaya">Papaya</option>
  <option value="Kiwi">Kiwi</option>
</select>

    

Introduction

The Groundhog select component visually enhances the standard html <select> element. The select usually holds a list of elements that can be expanded.

Including a button

  1. To include a Groundhog select add a <select> element. Include the necessary <options>.
    <select>
    <option>
    </option>
    </select>
    
  2. Add the necessary Groundhog classes and values to the elements.
    <select class="select">
    <option value="Banana">
    </option>
    </select>
    
  3. Add a label to the select (optional) and the appropriate ids.
    <label for="s1" class="label">Label</label>
    <select class="select" id="s1">
    <option value="Banana">
    </option>
    </select>