Elements:Select Picker
Extended select menu styling ideal for long select menus and multiselect select menus.
Standard select boxes
<select data-bs-toggle="select" class="form-control mb-3">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>Optgroups
<select data-bs-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
<select data-bs-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
.
<select data-bs-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"}}'
.
<select data-bs-toggle="select" data-style="btn-primary" class="form-control mb-3">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
<select data-bs-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-bs-toggle="select" data-style="btn-danger btn-lg" class="form-control-lg mb-3">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>