Skip to content

Elements:Select Picker

Extended select menu styling ideal for long select menus and multiselect select menus.

Standard select boxes

View code example
<select data-toggle="select" class="form-control mb-3">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Optgroups

View code example
<select data-toggle="select" class="mb-3">
  <optgroup label="Picnic">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </optgroup>
  <optgroup label="Camping">
    <option>Tent</option>
    <option>Flashlight</option>
    <option>Toilet Paper</option>
  </optgroup>
</select>

Multiple

View code example
<select data-toggle="select" class="mb-3" multiple>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Live Search

Use the option labels for search or add key words to options to improve their searchability using data-tokens .

View code example
<select data-toggle="select" class="mb-3" data-live-search="true">
  <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
  <option data-tokens="mustard">Burger, Shake and a Smile</option>
  <option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>

Button Styling

Apply button styles or any style class using data-style or data-settings='{"classes":{"LIST", "OF", "CLASSES"}}' .

View code example
<select data-toggle="select" data-style="btn-primary" class="form-control mb-3">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

<select data-toggle="select" data-style="btn-info btn-rounded" class="form-control-rounded mb-3">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

<select data-toggle="select" data-style="btn-danger btn-lg" class="form-control-lg mb-3">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Awesome Features

99.9% Uptime Free Upgrades Fully Responsive Bug Free

Theme Colours

Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Cookies are NOT enabled so colour selection is not persistent.

Back to main homepage

Back to intro page