Select
The select element defines a form control for the user to select a value from a dropdown box.
Usage
Place an select within a form. Each select must have an associated label. The label for attribute must be identical to the input id attribute.
The label element must be directly underneath the select element.
NOTE : For the select label to stay up after entering text and unfocussed, this requires JavaScript, this can be done with the JavaScript support class slb-show
Modifier selectors
| Modifier selector | Description |
|---|---|
slb-form__control |
Default form Radio button. |
slb-form__control-block |
Block form Radio button. |
JavaScript Support
| JavaScript Support class name | Description |
|---|---|
slb-show |
Add this class to the select element and the label will stay in its active position. |
.slb-form__control - Default form control.
.slb-form__control-block - Block form control.
forms\select-input.hbs
<form>
<div class="slb-form__group">
<select type="text" class="[modifier class]" id="exampleInputText-[modifier class]">
<option value=""></option>
<option value="first">First</option>
<option value="second">Second</option>
<option value="third">Third</option>
</select>
<label class="slb-form__label" for="exampleInputText-[modifier class]">Input Label</label>
<span class="slb-form__bar"></span>
<svg class="slb-icon slb-form__icon" viewBox="0 0 320 512" id="caret-down-[modifier class]"><title>caret-down</title><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>
</div>
</form>
Source:
components/forms/_form-control-select.scss