City of Ghent Style Guide

Checkboxes with filter

DEPRECATED: do no longer use this component. It has been replaced by checkboxes dynamic

When to use this component

Use the checkboxes with filter component when you need to help users select one or more options from a long list of options.

When not to use this component

Do not use the checkboxes with filter component when you need to help users:

  • Select one or more options from a short list of options.
  • Toggle a single option on or off.

In these cases, use checkboxes without filter instead.

How it works

In a checkboxes with filter component, what would normally be a long list of checkboxes, is replaced by a button that opens a modal where the list of checkboxes is placed instead.

The behavior is as follows:

  1. When the users clicks the button, the modal is opened.
  2. In the modal, the list of checkboxes is shown.
  3. The user can select on or more checkboxes in the modal.
  4. To make finding and selecting the right checkboxes easier, the user can filter the list of checkboxes to narrow it down.
  5. When ready, the user can click the “Confirm selection” button, and the selected checkboxes will be the new state.
  6. Closing the modal without confirmation restores the previous state.

When one or more checkboxes are selected, the user can see this both:

  • In the default view: Above the select button, a label with the number of selected options is shown. The label is only shown if at least one option is selected. If no options are selected, the label is not shown.
  • In the modal: Above the filter field, the selected options are shown using filter tags. The user can also deselect options here. Read more about how tags work.

Markup

  • Root element is a fieldset with class ‘checkbox-filter’.
  • Required elements are: .checkbox-filter__selected, .checkbox-filter__modal, .overlay.checkbox-filter__close, button.checkbox-filter__open.
  • The modal must contain: a header with title, a close button, a filter field with counter and a collection of checkbox components (.checkbox-filter__checkboxes).

Accessibility

  • The modal uses a tabtrap.
  • The label or description for the filterfield indicates that the filtering will happen on input.

Javascript

Usage

Create a new CheckboxFilter object by running:

new CheckboxFilter(element, [options]);

The optional ‘options’ object contains all queryselectors, a string ‘hiddenTagText’ to use as hidden text on the selected tags buttons and a boolean to prevent creating selected tags in case you need your own implementation.

{% set modalTitle = label %}
{% if label_optional %}
  {% set modalTitle = modalTitle ~ '<span class="label-optional">(' ~ label_optional ~ ')</span>' %}
{% endif %}

{% set modalContent %}
  <div class="checkbox-filter__selected"></div>
  <div class="form-item">
    <label for="checkboxes__filter_id_{{ modifier }}">Filter the list
      below</label>
    <div class="form-item checkbox-filter__filter__search-wrapper">
      <input type="search" id="checkboxes__filter_id_{{ modifier }}"
             class="checkbox-filter__filter">

      <p aria-live="polite" aria-atomic="true"
         class="checkbox-filter__result-wrapper">
        <span class="checkbox-filter__result">#</span> filter(s) found
      </p>
    </div>
  </div>

  {% for category in options %}
    <div class="checkbox-filter__checkboxes">
      <h4 class="checkbox-filter__category">{{ category.title }}</h4>
      {% include '@input' with {
        type: 'checkbox',
        id: category.value~"-"~modifier,
        label: 'Show all',
        value: category.value,
        modifierWrapper: 'full-width'
      } %}

      {% for item in category.items %}
        {% include '@input' with {
          type: 'checkbox',
          label: item.label_checkbox,
          name: item.checkbox_name,
          id: item.checkbox_id,
          value: item.checkbox_value
        } %}
      {% endfor %}
    </div>
  {% endfor %}
{% endset %}
{% set modalActions %}
  <button type="button"
          class="button button-primary checkbox-filter__submit modal-close"
          data-target="{{ 'modal' ~ modifier }}">Confirm selection
  </button>
{% endset %}

<fieldset class="form-item {{ modifier }} {{ stacked ? 'stacked' : '' }} checkbox-filter">
  <legend>
    <span class="legend-title">{{ label }}</span>
    {% if label_optional %}
      <span class="label-optional">({{ label_optional }})</span>
    {% endif %}
  </legend>
  {% include '@field-message' with {
    "field_message": field_description,
    "modifier": null
  } %}
  <div class="form-columns">
    <div class="form-item-column">
      {% include "@modal" with {
        id: 'modal' ~ modifier,
        title: modalTitle,
        classes: 'checkbox-filter__modal',
        cancelClasses: 'checkbox-filter__close',
        modifier: 'fixed-height',
        content: modalContent,
        actions: modalActions
      } %}
      <p class="checkbox-filter__count-wrapper hidden">
        <strong><span class="checkbox-filter__count">0</span> {{ label_count }}
          selected</strong>
      </p>
      <button type="button"
              class="button button-secondary button-small checkbox-filter__open"
              aria-controls="{{ 'modal' ~ modifier }}" aria-expanded="false">
        Select ...
      </button>
    </div>
    <div class="form-item-column">
      {% if modifier == 'error' %}
        {% include '@field-message' with {
          "modifier": "error"
        } %}
      {% endif %}
      {% if modifier == 'success' %}
        {% include '@field-message' with {
          "modifier": "success"
        } %}
      {% endif %}
    </div>
  </div>
</fieldset>
<fieldset class="form-item success  checkbox-filter">
      <legend>
          <span class="legend-title">Label checkbox</span>
          <span class="label-optional">(Optional)</span>
      </legend>
      <div class="field-message ">
          Optional field description.<br> --- <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consectetur eveniet illo porro quis sint.
          <div class="accolade "></div>
      </div>
      <div class="form-columns">
          <div class="form-item-column">
              <div id="modalsuccess" class="modal modal--fixed-height checkbox-filter__modal" role="dialog" aria-modal="true" aria-labelledby="modalsuccess-title" tabindex="-1">

                  <div class="modal-inner">
                      <div class="modal-header">
                          <button class="button button-secondary close icon-cross modal-close checkbox-filter__close" data-target="modalsuccess">
                              <span>Close</span>
                          </button>
                      </div>
                      <div class="modal-content" tabindex="0">
                          <h2 id="modalsuccess-title">Label checkbox<span class="label-optional">(Optional)</span></h2>
                          <div class="checkbox-filter__selected"></div>
                          <div class="form-item">
                              <label for="checkboxes__filter_id_success">Filter the list
                                  below</label>
                              <div class="form-item checkbox-filter__filter__search-wrapper">
                                  <input type="search" id="checkboxes__filter_id_success" class="checkbox-filter__filter">

                                  <p aria-live="polite" aria-atomic="true" class="checkbox-filter__result-wrapper">
                                      <span class="checkbox-filter__result">#</span> filter(s) found
                                  </p>
                              </div>
                          </div>

                          <div class="checkbox-filter__checkboxes">
                              <h4 class="checkbox-filter__category">Category 1</h4>
                              <div class="checkbox full-width">

                                  <input type="checkbox" id="category_1-success" value="category_1" class="checkbox success" />
                                  <label for="category_1-success">Show all</label>
                              </div>

                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-419-with-success" name="checkboxgroup[]" value="419" class="checkbox success" />
                                  <label for="checkbox-419-with-success">Checkbox option 419</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-418-with-success" name="checkboxgroup[]" value="418" class="checkbox success" />
                                  <label for="checkbox-418-with-success">Checkbox option 418</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-417-with-success" name="checkboxgroup[]" value="417" class="checkbox success" />
                                  <label for="checkbox-417-with-success">Checkbox option 417</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-416-with-success" name="checkboxgroup[]" value="416" class="checkbox success" />
                                  <label for="checkbox-416-with-success">Checkbox option 416</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-415-with-success" name="checkboxgroup[]" value="415" class="checkbox success" />
                                  <label for="checkbox-415-with-success">Checkbox option 415</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-414-with-success" name="checkboxgroup[]" value="414" class="checkbox success" />
                                  <label for="checkbox-414-with-success">Checkbox option 414</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-413-with-success" name="checkboxgroup[]" value="413" class="checkbox success" />
                                  <label for="checkbox-413-with-success">Checkbox option 413</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-412-with-success" name="checkboxgroup[]" value="412" class="checkbox success" />
                                  <label for="checkbox-412-with-success">Checkbox option 412</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-411-with-success" name="checkboxgroup[]" value="411" class="checkbox success" />
                                  <label for="checkbox-411-with-success">Checkbox option 411</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-410-with-success" name="checkboxgroup[]" value="410" class="checkbox success" />
                                  <label for="checkbox-410-with-success">Checkbox option 410</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-49-with-success" name="checkboxgroup[]" value="49" class="checkbox success" />
                                  <label for="checkbox-49-with-success">Checkbox option 49</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-48-with-success" name="checkboxgroup[]" value="48" class="checkbox success" />
                                  <label for="checkbox-48-with-success">Checkbox option 48</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-47-with-success" name="checkboxgroup[]" value="47" class="checkbox success" />
                                  <label for="checkbox-47-with-success">Checkbox option 47</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-46-with-success" name="checkboxgroup[]" value="46" class="checkbox success" />
                                  <label for="checkbox-46-with-success">Checkbox option 46</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-45-with-success" name="checkboxgroup[]" value="45" class="checkbox success" />
                                  <label for="checkbox-45-with-success">Checkbox option 45</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-44-with-success" name="checkboxgroup[]" value="44" class="checkbox success" />
                                  <label for="checkbox-44-with-success">Checkbox option 44</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-43-with-success" name="checkboxgroup[]" value="43" class="checkbox success" />
                                  <label for="checkbox-43-with-success">Checkbox option 43</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-42-with-success" name="checkboxgroup[]" value="42" class="checkbox success" />
                                  <label for="checkbox-42-with-success">Checkbox option 42</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-41-with-success" name="checkboxgroup[]" value="41" class="checkbox success" />
                                  <label for="checkbox-41-with-success">Checkbox option 41</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-40-with-success" name="checkboxgroup[]" value="40" class="checkbox success" />
                                  <label for="checkbox-40-with-success">Checkbox option 40</label>
                              </div>
                          </div>
                          <div class="checkbox-filter__checkboxes">
                              <h4 class="checkbox-filter__category">Category 2</h4>
                              <div class="checkbox full-width">

                                  <input type="checkbox" id="category_2-success" value="category_2" class="checkbox success" />
                                  <label for="category_2-success">Show all</label>
                              </div>

                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-319-with-success" name="checkboxgroup[]" value="319" class="checkbox success" />
                                  <label for="checkbox-319-with-success">Checkbox option 319</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-318-with-success" name="checkboxgroup[]" value="318" class="checkbox success" />
                                  <label for="checkbox-318-with-success">Checkbox option 318</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-317-with-success" name="checkboxgroup[]" value="317" class="checkbox success" />
                                  <label for="checkbox-317-with-success">Checkbox option 317</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-316-with-success" name="checkboxgroup[]" value="316" class="checkbox success" />
                                  <label for="checkbox-316-with-success">Checkbox option 316</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-315-with-success" name="checkboxgroup[]" value="315" class="checkbox success" />
                                  <label for="checkbox-315-with-success">Checkbox option 315</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-314-with-success" name="checkboxgroup[]" value="314" class="checkbox success" />
                                  <label for="checkbox-314-with-success">Checkbox option 314</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-313-with-success" name="checkboxgroup[]" value="313" class="checkbox success" />
                                  <label for="checkbox-313-with-success">Checkbox option 313</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-312-with-success" name="checkboxgroup[]" value="312" class="checkbox success" />
                                  <label for="checkbox-312-with-success">Checkbox option 312</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-311-with-success" name="checkboxgroup[]" value="311" class="checkbox success" />
                                  <label for="checkbox-311-with-success">Checkbox option 311</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-310-with-success" name="checkboxgroup[]" value="310" class="checkbox success" />
                                  <label for="checkbox-310-with-success">Checkbox option 310</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-39-with-success" name="checkboxgroup[]" value="39" class="checkbox success" />
                                  <label for="checkbox-39-with-success">Checkbox option 39</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-38-with-success" name="checkboxgroup[]" value="38" class="checkbox success" />
                                  <label for="checkbox-38-with-success">Checkbox option 38</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-37-with-success" name="checkboxgroup[]" value="37" class="checkbox success" />
                                  <label for="checkbox-37-with-success">Checkbox option 37</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-36-with-success" name="checkboxgroup[]" value="36" class="checkbox success" />
                                  <label for="checkbox-36-with-success">Checkbox option 36</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-35-with-success" name="checkboxgroup[]" value="35" class="checkbox success" />
                                  <label for="checkbox-35-with-success">Checkbox option 35</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-34-with-success" name="checkboxgroup[]" value="34" class="checkbox success" />
                                  <label for="checkbox-34-with-success">Checkbox option 34</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-33-with-success" name="checkboxgroup[]" value="33" class="checkbox success" />
                                  <label for="checkbox-33-with-success">Checkbox option 33</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-32-with-success" name="checkboxgroup[]" value="32" class="checkbox success" />
                                  <label for="checkbox-32-with-success">Checkbox option 32</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-31-with-success" name="checkboxgroup[]" value="31" class="checkbox success" />
                                  <label for="checkbox-31-with-success">Checkbox option 31</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-30-with-success" name="checkboxgroup[]" value="30" class="checkbox success" />
                                  <label for="checkbox-30-with-success">Checkbox option 30</label>
                              </div>
                          </div>
                          <div class="checkbox-filter__checkboxes">
                              <h4 class="checkbox-filter__category">Category 3</h4>
                              <div class="checkbox full-width">

                                  <input type="checkbox" id="category_3-success" value="category_3" class="checkbox success" />
                                  <label for="category_3-success">Show all</label>
                              </div>

                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-219-with-success" name="checkboxgroup[]" value="219" class="checkbox success" />
                                  <label for="checkbox-219-with-success">Checkbox option 219</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-218-with-success" name="checkboxgroup[]" value="218" class="checkbox success" />
                                  <label for="checkbox-218-with-success">Checkbox option 218</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-217-with-success" name="checkboxgroup[]" value="217" class="checkbox success" />
                                  <label for="checkbox-217-with-success">Checkbox option 217</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-216-with-success" name="checkboxgroup[]" value="216" class="checkbox success" />
                                  <label for="checkbox-216-with-success">Checkbox option 216</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-215-with-success" name="checkboxgroup[]" value="215" class="checkbox success" />
                                  <label for="checkbox-215-with-success">Checkbox option 215</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-214-with-success" name="checkboxgroup[]" value="214" class="checkbox success" />
                                  <label for="checkbox-214-with-success">Checkbox option 214</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-213-with-success" name="checkboxgroup[]" value="213" class="checkbox success" />
                                  <label for="checkbox-213-with-success">Checkbox option 213</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-212-with-success" name="checkboxgroup[]" value="212" class="checkbox success" />
                                  <label for="checkbox-212-with-success">Checkbox option 212</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-211-with-success" name="checkboxgroup[]" value="211" class="checkbox success" />
                                  <label for="checkbox-211-with-success">Checkbox option 211</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-210-with-success" name="checkboxgroup[]" value="210" class="checkbox success" />
                                  <label for="checkbox-210-with-success">Checkbox option 210</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-29-with-success" name="checkboxgroup[]" value="29" class="checkbox success" />
                                  <label for="checkbox-29-with-success">Checkbox option 29</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-28-with-success" name="checkboxgroup[]" value="28" class="checkbox success" />
                                  <label for="checkbox-28-with-success">Checkbox option 28</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-27-with-success" name="checkboxgroup[]" value="27" class="checkbox success" />
                                  <label for="checkbox-27-with-success">Checkbox option 27</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-26-with-success" name="checkboxgroup[]" value="26" class="checkbox success" />
                                  <label for="checkbox-26-with-success">Checkbox option 26</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-25-with-success" name="checkboxgroup[]" value="25" class="checkbox success" />
                                  <label for="checkbox-25-with-success">Checkbox option 25</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-24-with-success" name="checkboxgroup[]" value="24" class="checkbox success" />
                                  <label for="checkbox-24-with-success">Checkbox option 24</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-23-with-success" name="checkboxgroup[]" value="23" class="checkbox success" />
                                  <label for="checkbox-23-with-success">Checkbox option 23</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-22-with-success" name="checkboxgroup[]" value="22" class="checkbox success" />
                                  <label for="checkbox-22-with-success">Checkbox option 22</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-21-with-success" name="checkboxgroup[]" value="21" class="checkbox success" />
                                  <label for="checkbox-21-with-success">Checkbox option 21</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-20-with-success" name="checkboxgroup[]" value="20" class="checkbox success" />
                                  <label for="checkbox-20-with-success">Checkbox option 20</label>
                              </div>
                          </div>
                          <div class="checkbox-filter__checkboxes">
                              <h4 class="checkbox-filter__category">Category 4</h4>
                              <div class="checkbox full-width">

                                  <input type="checkbox" id="category_4-success" value="category_4" class="checkbox success" />
                                  <label for="category_4-success">Show all</label>
                              </div>

                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-119-with-success" name="checkboxgroup[]" value="119" class="checkbox success" />
                                  <label for="checkbox-119-with-success">Checkbox option 119</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-118-with-success" name="checkboxgroup[]" value="118" class="checkbox success" />
                                  <label for="checkbox-118-with-success">Checkbox option 118</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-117-with-success" name="checkboxgroup[]" value="117" class="checkbox success" />
                                  <label for="checkbox-117-with-success">Checkbox option 117</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-116-with-success" name="checkboxgroup[]" value="116" class="checkbox success" />
                                  <label for="checkbox-116-with-success">Checkbox option 116</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-115-with-success" name="checkboxgroup[]" value="115" class="checkbox success" />
                                  <label for="checkbox-115-with-success">Checkbox option 115</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-114-with-success" name="checkboxgroup[]" value="114" class="checkbox success" />
                                  <label for="checkbox-114-with-success">Checkbox option 114</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-113-with-success" name="checkboxgroup[]" value="113" class="checkbox success" />
                                  <label for="checkbox-113-with-success">Checkbox option 113</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-112-with-success" name="checkboxgroup[]" value="112" class="checkbox success" />
                                  <label for="checkbox-112-with-success">Checkbox option 112</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-111-with-success" name="checkboxgroup[]" value="111" class="checkbox success" />
                                  <label for="checkbox-111-with-success">Checkbox option 111</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-110-with-success" name="checkboxgroup[]" value="110" class="checkbox success" />
                                  <label for="checkbox-110-with-success">Checkbox option 110</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-19-with-success" name="checkboxgroup[]" value="19" class="checkbox success" />
                                  <label for="checkbox-19-with-success">Checkbox option 19</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-18-with-success" name="checkboxgroup[]" value="18" class="checkbox success" />
                                  <label for="checkbox-18-with-success">Checkbox option 18</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-17-with-success" name="checkboxgroup[]" value="17" class="checkbox success" />
                                  <label for="checkbox-17-with-success">Checkbox option 17</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-16-with-success" name="checkboxgroup[]" value="16" class="checkbox success" />
                                  <label for="checkbox-16-with-success">Checkbox option 16</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-15-with-success" name="checkboxgroup[]" value="15" class="checkbox success" />
                                  <label for="checkbox-15-with-success">Checkbox option 15</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-14-with-success" name="checkboxgroup[]" value="14" class="checkbox success" />
                                  <label for="checkbox-14-with-success">Checkbox option 14</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-13-with-success" name="checkboxgroup[]" value="13" class="checkbox success" />
                                  <label for="checkbox-13-with-success">Checkbox option 13</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-12-with-success" name="checkboxgroup[]" value="12" class="checkbox success" />
                                  <label for="checkbox-12-with-success">Checkbox option 12</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-11-with-success" name="checkboxgroup[]" value="11" class="checkbox success" />
                                  <label for="checkbox-11-with-success">Checkbox option 11</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-10-with-success" name="checkboxgroup[]" value="10" class="checkbox success" />
                                  <label for="checkbox-10-with-success">Checkbox option 10</label>
                              </div>
                          </div>
                          <div class="checkbox-filter__checkboxes">
                              <h4 class="checkbox-filter__category">Category 5</h4>
                              <div class="checkbox full-width">

                                  <input type="checkbox" id="category_5-success" value="category_5" class="checkbox success" />
                                  <label for="category_5-success">Show all</label>
                              </div>

                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-019-with-success" name="checkboxgroup[]" value="019" class="checkbox success" />
                                  <label for="checkbox-019-with-success">Checkbox option 019</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-018-with-success" name="checkboxgroup[]" value="018" class="checkbox success" />
                                  <label for="checkbox-018-with-success">Checkbox option 018</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-017-with-success" name="checkboxgroup[]" value="017" class="checkbox success" />
                                  <label for="checkbox-017-with-success">Checkbox option 017</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-016-with-success" name="checkboxgroup[]" value="016" class="checkbox success" />
                                  <label for="checkbox-016-with-success">Checkbox option 016</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-015-with-success" name="checkboxgroup[]" value="015" class="checkbox success" />
                                  <label for="checkbox-015-with-success">Checkbox option 015</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-014-with-success" name="checkboxgroup[]" value="014" class="checkbox success" />
                                  <label for="checkbox-014-with-success">Checkbox option 014</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-013-with-success" name="checkboxgroup[]" value="013" class="checkbox success" />
                                  <label for="checkbox-013-with-success">Checkbox option 013</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-012-with-success" name="checkboxgroup[]" value="012" class="checkbox success" />
                                  <label for="checkbox-012-with-success">Checkbox option 012</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-011-with-success" name="checkboxgroup[]" value="011" class="checkbox success" />
                                  <label for="checkbox-011-with-success">Checkbox option 011</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-010-with-success" name="checkboxgroup[]" value="010" class="checkbox success" />
                                  <label for="checkbox-010-with-success">Checkbox option 010</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-09-with-success" name="checkboxgroup[]" value="09" class="checkbox success" />
                                  <label for="checkbox-09-with-success">Checkbox option 09</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-08-with-success" name="checkboxgroup[]" value="08" class="checkbox success" />
                                  <label for="checkbox-08-with-success">Checkbox option 08</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-07-with-success" name="checkboxgroup[]" value="07" class="checkbox success" />
                                  <label for="checkbox-07-with-success">Checkbox option 07</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-06-with-success" name="checkboxgroup[]" value="06" class="checkbox success" />
                                  <label for="checkbox-06-with-success">Checkbox option 06</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-05-with-success" name="checkboxgroup[]" value="05" class="checkbox success" />
                                  <label for="checkbox-05-with-success">Checkbox option 05</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-04-with-success" name="checkboxgroup[]" value="04" class="checkbox success" />
                                  <label for="checkbox-04-with-success">Checkbox option 04</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-03-with-success" name="checkboxgroup[]" value="03" class="checkbox success" />
                                  <label for="checkbox-03-with-success">Checkbox option 03</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-02-with-success" name="checkboxgroup[]" value="02" class="checkbox success" />
                                  <label for="checkbox-02-with-success">Checkbox option 02</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-01-with-success" name="checkboxgroup[]" value="01" class="checkbox success" />
                                  <label for="checkbox-01-with-success">Checkbox option 01</label>
                              </div>
                              <div class="checkbox">

                                  <input type="checkbox" id="checkbox-00-with-success" name="checkboxgroup[]" value="00" class="checkbox success" />
                                  <label for="checkbox-00-with-success">Checkbox option 00</label>
                              </div>
                          </div>

                      </div>
                      <div class="modal-actions">
                          <button type="button" class="button button-primary checkbox-filter__submit modal-close" data-target="modalsuccess">Confirm selection
                          </button>

                      </div>
                  </div>

                  <div class="modal-overlay modal-close checkbox-filter__close" data-target="modalsuccess" tabindex="-1"></div>
              </div>
              <p class="checkbox-filter__count-wrapper hidden">
                  <strong><span class="checkbox-filter__count">0</span> value(s)
                      selected</strong>
              </p>
              <button type="button" class="button button-secondary button-small checkbox-filter__open" aria-controls="modalsuccess" aria-expanded="false">
                  Select ...
              </button>
          </div>
          <div class="form-item-column">
              <div class="field-message success" role="alert">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.
                  <div class="accolade "></div>
              </div>
          </div>
      </div>
  </fieldset>
{
  "label": "Label checkbox",
  "label_optional": "Optional",
  "label_count": "value(s)",
  "field_description": "Optional field description.<br> --- <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consectetur eveniet illo porro quis sint.",
  "field_message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.",
  "description": "Description checkboxes.",
  "options": [
    {
      "title": "Category 1",
      "value": "category_1",
      "items": [
        {
          "label_checkbox": "Checkbox option 419",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-419-with-success",
          "checkbox_value": "419"
        },
        {
          "label_checkbox": "Checkbox option 418",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-418-with-success",
          "checkbox_value": "418"
        },
        {
          "label_checkbox": "Checkbox option 417",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-417-with-success",
          "checkbox_value": "417"
        },
        {
          "label_checkbox": "Checkbox option 416",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-416-with-success",
          "checkbox_value": "416"
        },
        {
          "label_checkbox": "Checkbox option 415",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-415-with-success",
          "checkbox_value": "415"
        },
        {
          "label_checkbox": "Checkbox option 414",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-414-with-success",
          "checkbox_value": "414"
        },
        {
          "label_checkbox": "Checkbox option 413",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-413-with-success",
          "checkbox_value": "413"
        },
        {
          "label_checkbox": "Checkbox option 412",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-412-with-success",
          "checkbox_value": "412"
        },
        {
          "label_checkbox": "Checkbox option 411",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-411-with-success",
          "checkbox_value": "411"
        },
        {
          "label_checkbox": "Checkbox option 410",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-410-with-success",
          "checkbox_value": "410"
        },
        {
          "label_checkbox": "Checkbox option 49",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-49-with-success",
          "checkbox_value": "49"
        },
        {
          "label_checkbox": "Checkbox option 48",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-48-with-success",
          "checkbox_value": "48"
        },
        {
          "label_checkbox": "Checkbox option 47",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-47-with-success",
          "checkbox_value": "47"
        },
        {
          "label_checkbox": "Checkbox option 46",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-46-with-success",
          "checkbox_value": "46"
        },
        {
          "label_checkbox": "Checkbox option 45",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-45-with-success",
          "checkbox_value": "45"
        },
        {
          "label_checkbox": "Checkbox option 44",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-44-with-success",
          "checkbox_value": "44"
        },
        {
          "label_checkbox": "Checkbox option 43",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-43-with-success",
          "checkbox_value": "43"
        },
        {
          "label_checkbox": "Checkbox option 42",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-42-with-success",
          "checkbox_value": "42"
        },
        {
          "label_checkbox": "Checkbox option 41",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-41-with-success",
          "checkbox_value": "41"
        },
        {
          "label_checkbox": "Checkbox option 40",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-40-with-success",
          "checkbox_value": "40"
        }
      ]
    },
    {
      "title": "Category 2",
      "value": "category_2",
      "items": [
        {
          "label_checkbox": "Checkbox option 319",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-319-with-success",
          "checkbox_value": "319"
        },
        {
          "label_checkbox": "Checkbox option 318",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-318-with-success",
          "checkbox_value": "318"
        },
        {
          "label_checkbox": "Checkbox option 317",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-317-with-success",
          "checkbox_value": "317"
        },
        {
          "label_checkbox": "Checkbox option 316",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-316-with-success",
          "checkbox_value": "316"
        },
        {
          "label_checkbox": "Checkbox option 315",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-315-with-success",
          "checkbox_value": "315"
        },
        {
          "label_checkbox": "Checkbox option 314",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-314-with-success",
          "checkbox_value": "314"
        },
        {
          "label_checkbox": "Checkbox option 313",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-313-with-success",
          "checkbox_value": "313"
        },
        {
          "label_checkbox": "Checkbox option 312",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-312-with-success",
          "checkbox_value": "312"
        },
        {
          "label_checkbox": "Checkbox option 311",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-311-with-success",
          "checkbox_value": "311"
        },
        {
          "label_checkbox": "Checkbox option 310",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-310-with-success",
          "checkbox_value": "310"
        },
        {
          "label_checkbox": "Checkbox option 39",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-39-with-success",
          "checkbox_value": "39"
        },
        {
          "label_checkbox": "Checkbox option 38",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-38-with-success",
          "checkbox_value": "38"
        },
        {
          "label_checkbox": "Checkbox option 37",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-37-with-success",
          "checkbox_value": "37"
        },
        {
          "label_checkbox": "Checkbox option 36",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-36-with-success",
          "checkbox_value": "36"
        },
        {
          "label_checkbox": "Checkbox option 35",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-35-with-success",
          "checkbox_value": "35"
        },
        {
          "label_checkbox": "Checkbox option 34",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-34-with-success",
          "checkbox_value": "34"
        },
        {
          "label_checkbox": "Checkbox option 33",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-33-with-success",
          "checkbox_value": "33"
        },
        {
          "label_checkbox": "Checkbox option 32",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-32-with-success",
          "checkbox_value": "32"
        },
        {
          "label_checkbox": "Checkbox option 31",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-31-with-success",
          "checkbox_value": "31"
        },
        {
          "label_checkbox": "Checkbox option 30",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-30-with-success",
          "checkbox_value": "30"
        }
      ]
    },
    {
      "title": "Category 3",
      "value": "category_3",
      "items": [
        {
          "label_checkbox": "Checkbox option 219",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-219-with-success",
          "checkbox_value": "219"
        },
        {
          "label_checkbox": "Checkbox option 218",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-218-with-success",
          "checkbox_value": "218"
        },
        {
          "label_checkbox": "Checkbox option 217",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-217-with-success",
          "checkbox_value": "217"
        },
        {
          "label_checkbox": "Checkbox option 216",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-216-with-success",
          "checkbox_value": "216"
        },
        {
          "label_checkbox": "Checkbox option 215",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-215-with-success",
          "checkbox_value": "215"
        },
        {
          "label_checkbox": "Checkbox option 214",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-214-with-success",
          "checkbox_value": "214"
        },
        {
          "label_checkbox": "Checkbox option 213",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-213-with-success",
          "checkbox_value": "213"
        },
        {
          "label_checkbox": "Checkbox option 212",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-212-with-success",
          "checkbox_value": "212"
        },
        {
          "label_checkbox": "Checkbox option 211",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-211-with-success",
          "checkbox_value": "211"
        },
        {
          "label_checkbox": "Checkbox option 210",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-210-with-success",
          "checkbox_value": "210"
        },
        {
          "label_checkbox": "Checkbox option 29",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-29-with-success",
          "checkbox_value": "29"
        },
        {
          "label_checkbox": "Checkbox option 28",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-28-with-success",
          "checkbox_value": "28"
        },
        {
          "label_checkbox": "Checkbox option 27",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-27-with-success",
          "checkbox_value": "27"
        },
        {
          "label_checkbox": "Checkbox option 26",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-26-with-success",
          "checkbox_value": "26"
        },
        {
          "label_checkbox": "Checkbox option 25",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-25-with-success",
          "checkbox_value": "25"
        },
        {
          "label_checkbox": "Checkbox option 24",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-24-with-success",
          "checkbox_value": "24"
        },
        {
          "label_checkbox": "Checkbox option 23",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-23-with-success",
          "checkbox_value": "23"
        },
        {
          "label_checkbox": "Checkbox option 22",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-22-with-success",
          "checkbox_value": "22"
        },
        {
          "label_checkbox": "Checkbox option 21",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-21-with-success",
          "checkbox_value": "21"
        },
        {
          "label_checkbox": "Checkbox option 20",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-20-with-success",
          "checkbox_value": "20"
        }
      ]
    },
    {
      "title": "Category 4",
      "value": "category_4",
      "items": [
        {
          "label_checkbox": "Checkbox option 119",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-119-with-success",
          "checkbox_value": "119"
        },
        {
          "label_checkbox": "Checkbox option 118",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-118-with-success",
          "checkbox_value": "118"
        },
        {
          "label_checkbox": "Checkbox option 117",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-117-with-success",
          "checkbox_value": "117"
        },
        {
          "label_checkbox": "Checkbox option 116",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-116-with-success",
          "checkbox_value": "116"
        },
        {
          "label_checkbox": "Checkbox option 115",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-115-with-success",
          "checkbox_value": "115"
        },
        {
          "label_checkbox": "Checkbox option 114",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-114-with-success",
          "checkbox_value": "114"
        },
        {
          "label_checkbox": "Checkbox option 113",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-113-with-success",
          "checkbox_value": "113"
        },
        {
          "label_checkbox": "Checkbox option 112",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-112-with-success",
          "checkbox_value": "112"
        },
        {
          "label_checkbox": "Checkbox option 111",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-111-with-success",
          "checkbox_value": "111"
        },
        {
          "label_checkbox": "Checkbox option 110",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-110-with-success",
          "checkbox_value": "110"
        },
        {
          "label_checkbox": "Checkbox option 19",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-19-with-success",
          "checkbox_value": "19"
        },
        {
          "label_checkbox": "Checkbox option 18",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-18-with-success",
          "checkbox_value": "18"
        },
        {
          "label_checkbox": "Checkbox option 17",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-17-with-success",
          "checkbox_value": "17"
        },
        {
          "label_checkbox": "Checkbox option 16",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-16-with-success",
          "checkbox_value": "16"
        },
        {
          "label_checkbox": "Checkbox option 15",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-15-with-success",
          "checkbox_value": "15"
        },
        {
          "label_checkbox": "Checkbox option 14",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-14-with-success",
          "checkbox_value": "14"
        },
        {
          "label_checkbox": "Checkbox option 13",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-13-with-success",
          "checkbox_value": "13"
        },
        {
          "label_checkbox": "Checkbox option 12",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-12-with-success",
          "checkbox_value": "12"
        },
        {
          "label_checkbox": "Checkbox option 11",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-11-with-success",
          "checkbox_value": "11"
        },
        {
          "label_checkbox": "Checkbox option 10",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-10-with-success",
          "checkbox_value": "10"
        }
      ]
    },
    {
      "title": "Category 5",
      "value": "category_5",
      "items": [
        {
          "label_checkbox": "Checkbox option 019",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-019-with-success",
          "checkbox_value": "019"
        },
        {
          "label_checkbox": "Checkbox option 018",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-018-with-success",
          "checkbox_value": "018"
        },
        {
          "label_checkbox": "Checkbox option 017",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-017-with-success",
          "checkbox_value": "017"
        },
        {
          "label_checkbox": "Checkbox option 016",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-016-with-success",
          "checkbox_value": "016"
        },
        {
          "label_checkbox": "Checkbox option 015",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-015-with-success",
          "checkbox_value": "015"
        },
        {
          "label_checkbox": "Checkbox option 014",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-014-with-success",
          "checkbox_value": "014"
        },
        {
          "label_checkbox": "Checkbox option 013",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-013-with-success",
          "checkbox_value": "013"
        },
        {
          "label_checkbox": "Checkbox option 012",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-012-with-success",
          "checkbox_value": "012"
        },
        {
          "label_checkbox": "Checkbox option 011",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-011-with-success",
          "checkbox_value": "011"
        },
        {
          "label_checkbox": "Checkbox option 010",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-010-with-success",
          "checkbox_value": "010"
        },
        {
          "label_checkbox": "Checkbox option 09",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-09-with-success",
          "checkbox_value": "09"
        },
        {
          "label_checkbox": "Checkbox option 08",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-08-with-success",
          "checkbox_value": "08"
        },
        {
          "label_checkbox": "Checkbox option 07",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-07-with-success",
          "checkbox_value": "07"
        },
        {
          "label_checkbox": "Checkbox option 06",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-06-with-success",
          "checkbox_value": "06"
        },
        {
          "label_checkbox": "Checkbox option 05",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-05-with-success",
          "checkbox_value": "05"
        },
        {
          "label_checkbox": "Checkbox option 04",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-04-with-success",
          "checkbox_value": "04"
        },
        {
          "label_checkbox": "Checkbox option 03",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-03-with-success",
          "checkbox_value": "03"
        },
        {
          "label_checkbox": "Checkbox option 02",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-02-with-success",
          "checkbox_value": "02"
        },
        {
          "label_checkbox": "Checkbox option 01",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-01-with-success",
          "checkbox_value": "01"
        },
        {
          "label_checkbox": "Checkbox option 00",
          "checkbox_name": "checkboxgroup[]",
          "checkbox_id": "checkbox-00-with-success",
          "checkbox_value": "00"
        }
      ]
    }
  ],
  "modifier": "success"
}
  • Content:
    .checkbox-filter {
      .checkbox-filter__count-wrapper {
        &.hidden {
          @extend %visually-hidden
        }
    
        em {
          font-style: normal;
        }
      }
    
      .checkbox-filter__result-placeholder {
        &.hidden {
          display: none;
        }
      }
    }
    
    .checkbox-filter__modal {
      .tag {
        margin: 0 .5rem .5rem 0;
      }
    
      .checkbox-filter__filter__search-wrapper {
        max-width: 30rem;
    
        @include desktop {
          display: flex;
        }
    
        input,
        p {
          margin-bottom: 0;
        }
      }
    
      .checkbox-filter__filter {
        margin-bottom: 1rem;
      }
    
      .checkbox-filter__result-wrapper {
        &.hidden {
          display: none;
        }
    
        em {
          font-style: normal;
        }
    
        @include desktop {
          margin-left: 1rem;
          line-height: 2.4rem;
          white-space: nowrap;
        }
      }
    
      .checkbox-filter__checkboxes {
        display: flex;
        flex: 1;
        flex-wrap: wrap;
    
        > .checkbox {
          flex-basis: 320px;
          padding-right: 1rem;
        }
    
        > .checkbox.full-width,
        > .checkbox-filter__category {
          right: 0;
          left: 0;
          flex-basis: 100%;
          width: 100%;
          margin-right: auto;
          margin-left: auto;
        }
    
        > [hidden] {
          display: none;
        }
    
        & + .checkbox-filter__checkboxes {
          margin-top: 1rem;
        }
      }
    
      .checkbox-filter__selected {
        margin-bottom: .7rem;
      }
    }
    
  • URL: /components/raw/checkboxes-with-filter/_checkboxes-with-filter.scss
  • Filesystem Path: components/31-molecules/checkboxes-with-filter/_checkboxes-with-filter.scss
  • Size: 1.3 KB
  • Content:
    'use strict';
    
    (function () {
    
      if (!CheckboxFilter) { // eslint-disable-line no-undef
        return;
      }
    
      const selected = document.querySelectorAll('.checkbox-filter');
      for (let i = selected.length; i--;) {
        new CheckboxFilter(selected[i], {hiddenTagText: 'Remove tag'}); // eslint-disable-line no-undef
      }
    
    })();
    
  • URL: /components/raw/checkboxes-with-filter/checkbox_filter.bindings.js
  • Filesystem Path: components/31-molecules/checkboxes-with-filter/checkbox_filter.bindings.js
  • Size: 322 Bytes
  • Content:
    'use strict';
    
    (function (root, factory) {
      if (typeof define === 'function' && define.amd) {
        define(factory);
      }
      else {
        if (typeof exports === 'object') {
          module.exports = factory();
        }
        else {
          root.CheckboxFilter = factory();
        }
      }
    })(this || window, function () {
      return function (elem, options) {
        if (!options) {
          options = {};
        }
    
        /**
         * Filter input field.
         * @type {Element}
         */
        const filterfield = elem.querySelector(
          options.filterfield || '.checkbox-filter__filter'
        );
    
        /**
         * List of checkboxwrappers, each containing a checkbox and a label.
         * @type {NodeList|Array}
         */
        const checkboxes =
          elem.querySelectorAll(options.checkboxes || 'div.checkbox') || [];
    
        /**
         * Container to display the selected items.
         * @type {Element}
         */
        const selectedContainer = elem.querySelector(
          options.selectedContainer || '.checkbox-filter__selected'
        );
    
        /**
         * Container for the checkboxes.
         * @type {Element}
         */
        const checkboxContainers = elem.querySelectorAll(
          options.checkboxContainers || '.checkbox-filter__checkboxes'
        );
    
        /**
         * Button to trigger opening the modal.
         * @type {Element}
         */
        const openBtn = elem.querySelector(
          options.openBtn || '.checkbox-filter__open'
        );
    
        /**
         * Button to confirm the selection and close the modal.
         * @type {Element}
         */
        const submitBtn = elem.querySelector(
          options.submitBtn || '.checkbox-filter__submit'
        );
    
        /**
         * A list of elements to trigger closing the modal.
         * At least one must have the button role.
         * @type {NodeList}
         */
        const closeBtns = elem.querySelectorAll(
          options.closeBtns || '.checkbox-filter__close'
        );
    
        /**
         * Container to display the number of search results.
         * @type {Element}
         */
        const resultSpan = elem.querySelector(
          options.resultSpan || '.checkbox-filter__result'
        );
    
        /**
         * Container wrapping the countspan.
         * @type {Element}
         */
        const countSpanWrapper = elem.querySelector(
          options.countSpanWrapper || '.checkbox-filter__count-wrapper'
        );
    
        /**
         * Container to display the number of selected values.
         * @type {Element}
         */
        const countSpan = elem.querySelector(
          options.countSpan || '.checkbox-filter__count'
        );
    
        /**
         * Store the checked checkboxes prior to making changes.
         * @type {Array}
         */
        let selectedFilters = [];
    
        /**
         * Check to prevent the class from making selected item tags.
         * @type {boolean}
         */
        const makeTags = (() => {
          if (options.makeTags === false) {
            return options.makeTags;
          }
          return true;
        })();
    
        /**
         * Filter the displayed checkboxes.
         * @param {boolean} clear Clear the filtervalue if true.
         */
        const filter = clear => {
          if (!filterfield) {
            return;
          }
    
          if (clear) {
            filterfield.value = '';
          }
    
          let count = 0;
    
          [].slice.call(checkboxContainers).forEach(container => {
            container.style.display = 'none';
          });
    
          checkboxLoop(({checkboxWrapper, checkbox, label}) => {
            if (
              !label ||
              label.textContent
                .toUpperCase()
                .indexOf(filterfield.value.toUpperCase()) === -1
            ) {
              checkboxWrapper.setAttribute('hidden', 'true');
              checkbox.setAttribute('hidden', 'true');
            }
            else {
              checkboxWrapper.removeAttribute('hidden');
              checkbox.removeAttribute('hidden');
              count++;
            }
          });
    
          [].slice.call(checkboxContainers).forEach(container => {
            let displayedCount = container.querySelectorAll(`${options.checkboxes || 'div.checkbox'}:not([hidden])`).length;
            if (displayedCount) {
              container.style.display = '';
            }
          });
    
          updateResult(count);
        };
    
        /**
         * Make a tag.
         * @param {Element} checkbox Input type checkbox.
         * @param {Element} label Label for the input type checkbox.
         * @return {Element} A gent styleguide tag component.
         */
        const makeTag = (checkbox, label) => {
          let tag = document.createElement('span');
          tag.className = 'tag filter';
          tag.textContent = label.textContent;
          tag.setAttribute('data-value', checkbox.value);
    
          let button = document.createElement('button');
          button.type = 'button';
          button.innerHTML = `<span class="visually-hidden">${options.hiddenTagText ||
          'Remove tag'}</span>`;
    
          button.addEventListener('click', () => {
            checkbox.checked = false;
            selectedContainer.removeChild(tag);
    
            if (typeof options.onRemoveTag === 'function') {
              options.onRemoveTag(checkbox, tag);
            }
          });
    
          tag.appendChild(button);
    
          return tag;
        };
    
        /**
         * Remove a tag from the selectedContainer.
         * @param {Element} checkbox Input type checkbox.
         */
        const removeTag = checkbox => {
          let test = selectedContainer.querySelectorAll('.filter');
          for (let i = test.length; i--;) {
            if (test[i].getAttribute('data-value') === checkbox.value) {
              selectedContainer.removeChild(test[i]);
            }
          }
        };
    
        /**
         * Update the count display.
         */
        const updateCount = () => {
          const selectedCount = selectedContainer.children.length;
    
          if (countSpan) {
            countSpan.textContent = selectedCount;
          }
          if (countSpanWrapper) {
            if (selectedCount > 0) {
              countSpanWrapper.classList.remove('hidden');
            }
            else {
              countSpanWrapper.classList.add('hidden');
            }
          }
        };
    
        /**
         * Update the result display.
         * @param {number} resultCount The number of results after filter.
         */
        const updateResult = (resultCount) => {
          if (resultSpan) {
            resultSpan.textContent = resultCount;
          }
        };
    
        /**
         * Loop over all checkboxes and execute a callback for each iteration.
         * @param {function} next The callback function.
         */
        const checkboxLoop = next => {
          for (let i = checkboxes.length; i--;) {
            let checkboxWrapper = checkboxes[i];
            let checkbox = checkboxWrapper.querySelector('input[type=checkbox]');
            let label = checkboxWrapper.querySelector('label');
    
            // Sometimes the input element isn't rendered at this point.
            if (checkbox && label) {
              next({checkboxWrapper, checkbox, label});
            }
          }
        };
    
        /**
         * Reset the component to it's stored value.
         */
        const reset = () => {
          if (makeTags) {
            selectedContainer.innerHTML = '';
          }
    
          checkboxLoop(({checkbox, label}) => {
            if (selectedFilters.indexOf(checkbox) !== -1) {
              checkbox.checked = true;
            }
            else {
              checkbox.checked = false;
            }
            if (checkbox.checked && makeTags) {
              selectedContainer.appendChild(makeTag(checkbox, label));
            }
          });
        };
    
        /**
         * Initialise the component.
         */
        const init = () => {
          selectedFilters = [];
    
          checkboxLoop(({checkbox, label}) => {
            if (checkbox.checked && !checkbox.indeterminate && makeTags) {
              selectedContainer.appendChild(makeTag(checkbox, label));
            }
          });
    
          updateCount();
          filter(true);
        };
    
        /**
         * Add all events.
         */
        const addEvents = () => {
          // Make sure the filter method is not repeated while typing.
          if (filterfield) {
            let filterTimeOut = null;
    
            filterfield.addEventListener('input', () => {
              if (filterTimeOut) {
                clearTimeout(filterTimeOut);
              }
              filterTimeOut = setTimeout(filter, 200);
            });
          }
    
          // Add events for all checkboxes.
          checkboxLoop(({checkbox, label}) => {
            checkbox.addEventListener('change', () => {
              if (checkbox.checked) {
                if (makeTags) {
                  selectedContainer.appendChild(makeTag(checkbox, label));
                }
              }
              else {
                if (makeTags) {
                  removeTag(checkbox);
                }
              }
            });
          });
    
          // Enable opening the modal.
          if (openBtn) {
            openBtn.addEventListener('click', (e) => {
              selectedFilters = [];
              let count = 0;
    
              checkboxLoop(({checkbox}) => {
                if (checkbox.checked) {
                  selectedFilters.push(checkbox);
                }
                count++;
              });
    
              updateResult(count);
              document.addEventListener('keydown', handleKeyboardInput);
            });
          }
    
          // Add close events to all closeBtns.
          if (closeBtns) {
            for (let i = closeBtns.length; i--;) {
              closeBtns[i].addEventListener('click', () => {
                reset();
                updateCount();
                document.removeEventListener('keydown', handleKeyboardInput);
              });
            }
          }
    
          // Update selectedFilters and close.
          if (submitBtn) {
            submitBtn.addEventListener('click', () => {
              updateCount();
              document.removeEventListener('keydown', handleKeyboardInput);
            });
          }
        };
    
        /**
         * Handle keyboard input
         * @param {object} e event
         */
        const handleKeyboardInput = e => {
          let keyCode = e.keyCode || e.which;
          if (keyCode === 27) {
            e.preventDefault();
            reset();
            updateCount();
          }
        };
    
        init();
        addEvents();
    
        return {};
      };
    });
    
  • URL: /components/raw/checkboxes-with-filter/checkbox_filter.functions.js
  • Filesystem Path: components/31-molecules/checkboxes-with-filter/checkbox_filter.functions.js
  • Size: 9.7 KB