2.5 #Molecules.Multi-Select Multi Select
Multi select field.
Example
Markup: scss/styleguide/molecules/multi-select/multi-select.html
<div class="app-body">
<div class="container">
<div class="row">
<div class="col-lg-7">
<div class="filters js-filters stand-alone">
<div class="d-none js-chevron-template">
<div class="fa-icon">
<i class="fa-solid fa-chevron-down icon icon--chevron-down"></i>
</div>
</div>
<form>
<div class="form-wrapper js-form-wrapper form-item">
<legend>
<span class="fieldset-legend">Multi Select 1 - 2 checkboxes</span>
</legend>
<div class="fieldset-wrapper">
<div class="form-checkboxes">
<div class="form-item form-type-checkbox js-form-type-checkbox">
<input type="checkbox" id="option-1" name="option-1" value="option-1" class="form-checkbox">
<label for="option-1" class="option">
Option 1
</label>
</div>
<div class="form-item form-type-checkbox js-form-type-checkbox">
<input type="checkbox" id="option-2" name="option-2" value="option-2" class="form-checkbox">
<label for="option-2" class="option">
Option 2
</label>
</div>
</div>
</div>
</div>
<div class="form-wrapper js-form-wrapper form-item">
<legend>
<span class="fieldset-legend">Multi Select > 3 checkboxes</span>
</legend>
<div class="fieldset-wrapper">
<div class="form-checkboxes">
<div class="form-item form-type-checkbox js-form-type-checkbox">
<input type="checkbox" id="option-11" name="option-1" value="option-1" class="form-checkbox">
<label for="option-11" class="option">
Option 1
</label>
</div>
<div class="form-item form-type-checkbox js-form-type-checkbox">
<input type="checkbox" id="option-22" name="option-2" value="option-2" class="form-checkbox">
<label for="option-22" class="option">
Option 2
</label>
</div>
<div class="form-item form-type-checkbox js-form-type-checkbox">
<input type="checkbox" id="option-33" name="option-3" value="option-3" class="form-checkbox">
<label for="option-33" class="option">
Option 3
</label>
</div>
<div class="form-item form-type-checkbox js-form-type-checkbox">
<input type="checkbox" id="option-44" name="option-4" value="option-4" class="form-checkbox">
<label for="option-44" class="option">
Option 4
</label>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Source:
../client/scss/styleguide/molecules/multi-select/_multi-select.scss, line 1