The Select element represents a control that provides a menu of options from which the user can make a single selection.
Here is an example of a standard select usage paired with a label.
<label class="label margin-bottom-xxs" for="select-id-1">Label</label>
<div class="select">
<select name="select-1" id="select-id-1">
<option value="">Choose an option</option>
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
</select>
</div>
There is an option to style a multiple select dropdowns by using the .select-multiple
class in conjunction with .select
and adding the multiple
attribute to the <select>
tag.
Hold down Ctrl
button on Windows/Command
button on Mac to select multiple options.
<div class="select select-multiple">
<select name="select-2" id="select-id-2" multiple>
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
<option value="option-4">Option 4</option>
<option value="option-5">Option 5</option>
<option value="option-6">Option 6</option>
</select>
</div>
In order to achieve disabled styles, you'll need to add the disabled
attribute to the <select>
tag and also add the .select-disabled
class in conjunction with .select
.
<div class="select select-disabled">
<select name="select-3" id="select-id-3" disabled>
<option value="">Choose an option</option>
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
</select>
</div>
select-sm
/select-lg
makes input a little bigger or smaller than the default.
<div class="select select-sm">
<select name="select-4" id="select-id-4">
<option value="">Choose an option</option>
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
</select>
</div>
<div class="select margin-top-xs">
<select name="select-5" id="select-id-5">
<option value="">Choose an option</option>
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
</select>
</div>
<div class="select select-lg margin-top-xs">
<select name="select-6" id="select-id-6">
<option value="">Choose an option</option>
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
</select>
</div>
select-error
/select-success
helps with visual reflection of validation states.
State | Class | |
---|---|---|
Danger | .select .select-danger | |
Success | .select .select-success |
<div class="select select-danger">
<select name="select" id="select-id">
<option value="">Choose an option</option>
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
</select>
</div>