Stad Brugge

Design system 1.0

Example
Multi Select 1 - 2 checkboxes
Multi Select > 3 checkboxes
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