Use the checkboxes with filter component when you need to help users select one or more options from a long list of options.
Do not use the checkboxes with filter component when you need to help users:
In these cases, use checkboxes without filter instead.
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:
When one or more checkboxes are selected, the user can see this both:
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>
{{ label }}
{% 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>
Label checkbox
<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 type="button" class="button close icon-cross modal-close checkbox-filter__close" data-target="modalsuccess">
<span>Close</span>
</button>
</div>
<div class="modal-content" tabindex="0">
<h3 id="modalsuccess-title">Label checkbox<span class="label-optional">(Optional)</span></h3>
<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"
}
.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;
}
}
.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 {
flex-basis: 100%;
}
> [hidden] {
display: none;
}
& + .checkbox-filter__checkboxes {
margin-top: 1rem;
}
}
.checkbox-filter__selected {
margin-bottom: .7rem;
}
}
'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
}
})();
'use strict';
/* global define, module */
(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 {};
};
});