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 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="modal" class="modal modal--fixed-height checkbox-filter__modal" role="dialog" aria-modal="true" aria-labelledby="modal-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="modal">
<span>Close</span>
</button>
</div>
<div class="modal-content" tabindex="0">
<h3 id="modal-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_">Filter the list
below</label>
<div class="form-item checkbox-filter__filter__search-wrapper">
<input type="search" id="checkboxes__filter_id_" 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-" value="category_1" class="checkbox" />
<label for="category_1-">Show all</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-419-undefined" name="checkboxgroup[]" value="419" class="checkbox" />
<label for="checkbox-419-undefined">Checkbox option 419</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-418-undefined" name="checkboxgroup[]" value="418" class="checkbox" />
<label for="checkbox-418-undefined">Checkbox option 418</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-417-undefined" name="checkboxgroup[]" value="417" class="checkbox" />
<label for="checkbox-417-undefined">Checkbox option 417</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-416-undefined" name="checkboxgroup[]" value="416" class="checkbox" />
<label for="checkbox-416-undefined">Checkbox option 416</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-415-undefined" name="checkboxgroup[]" value="415" class="checkbox" />
<label for="checkbox-415-undefined">Checkbox option 415</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-414-undefined" name="checkboxgroup[]" value="414" class="checkbox" />
<label for="checkbox-414-undefined">Checkbox option 414</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-413-undefined" name="checkboxgroup[]" value="413" class="checkbox" />
<label for="checkbox-413-undefined">Checkbox option 413</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-412-undefined" name="checkboxgroup[]" value="412" class="checkbox" />
<label for="checkbox-412-undefined">Checkbox option 412</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-411-undefined" name="checkboxgroup[]" value="411" class="checkbox" />
<label for="checkbox-411-undefined">Checkbox option 411</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-410-undefined" name="checkboxgroup[]" value="410" class="checkbox" />
<label for="checkbox-410-undefined">Checkbox option 410</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-49-undefined" name="checkboxgroup[]" value="49" class="checkbox" />
<label for="checkbox-49-undefined">Checkbox option 49</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-48-undefined" name="checkboxgroup[]" value="48" class="checkbox" />
<label for="checkbox-48-undefined">Checkbox option 48</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-47-undefined" name="checkboxgroup[]" value="47" class="checkbox" />
<label for="checkbox-47-undefined">Checkbox option 47</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-46-undefined" name="checkboxgroup[]" value="46" class="checkbox" />
<label for="checkbox-46-undefined">Checkbox option 46</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-45-undefined" name="checkboxgroup[]" value="45" class="checkbox" />
<label for="checkbox-45-undefined">Checkbox option 45</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-44-undefined" name="checkboxgroup[]" value="44" class="checkbox" />
<label for="checkbox-44-undefined">Checkbox option 44</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-43-undefined" name="checkboxgroup[]" value="43" class="checkbox" />
<label for="checkbox-43-undefined">Checkbox option 43</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-42-undefined" name="checkboxgroup[]" value="42" class="checkbox" />
<label for="checkbox-42-undefined">Checkbox option 42</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-41-undefined" name="checkboxgroup[]" value="41" class="checkbox" />
<label for="checkbox-41-undefined">Checkbox option 41</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-40-undefined" name="checkboxgroup[]" value="40" class="checkbox" />
<label for="checkbox-40-undefined">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-" value="category_2" class="checkbox" />
<label for="category_2-">Show all</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-319-undefined" name="checkboxgroup[]" value="319" class="checkbox" />
<label for="checkbox-319-undefined">Checkbox option 319</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-318-undefined" name="checkboxgroup[]" value="318" class="checkbox" />
<label for="checkbox-318-undefined">Checkbox option 318</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-317-undefined" name="checkboxgroup[]" value="317" class="checkbox" />
<label for="checkbox-317-undefined">Checkbox option 317</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-316-undefined" name="checkboxgroup[]" value="316" class="checkbox" />
<label for="checkbox-316-undefined">Checkbox option 316</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-315-undefined" name="checkboxgroup[]" value="315" class="checkbox" />
<label for="checkbox-315-undefined">Checkbox option 315</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-314-undefined" name="checkboxgroup[]" value="314" class="checkbox" />
<label for="checkbox-314-undefined">Checkbox option 314</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-313-undefined" name="checkboxgroup[]" value="313" class="checkbox" />
<label for="checkbox-313-undefined">Checkbox option 313</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-312-undefined" name="checkboxgroup[]" value="312" class="checkbox" />
<label for="checkbox-312-undefined">Checkbox option 312</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-311-undefined" name="checkboxgroup[]" value="311" class="checkbox" />
<label for="checkbox-311-undefined">Checkbox option 311</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-310-undefined" name="checkboxgroup[]" value="310" class="checkbox" />
<label for="checkbox-310-undefined">Checkbox option 310</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-39-undefined" name="checkboxgroup[]" value="39" class="checkbox" />
<label for="checkbox-39-undefined">Checkbox option 39</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-38-undefined" name="checkboxgroup[]" value="38" class="checkbox" />
<label for="checkbox-38-undefined">Checkbox option 38</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-37-undefined" name="checkboxgroup[]" value="37" class="checkbox" />
<label for="checkbox-37-undefined">Checkbox option 37</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-36-undefined" name="checkboxgroup[]" value="36" class="checkbox" />
<label for="checkbox-36-undefined">Checkbox option 36</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-35-undefined" name="checkboxgroup[]" value="35" class="checkbox" />
<label for="checkbox-35-undefined">Checkbox option 35</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-34-undefined" name="checkboxgroup[]" value="34" class="checkbox" />
<label for="checkbox-34-undefined">Checkbox option 34</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-33-undefined" name="checkboxgroup[]" value="33" class="checkbox" />
<label for="checkbox-33-undefined">Checkbox option 33</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-32-undefined" name="checkboxgroup[]" value="32" class="checkbox" />
<label for="checkbox-32-undefined">Checkbox option 32</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-31-undefined" name="checkboxgroup[]" value="31" class="checkbox" />
<label for="checkbox-31-undefined">Checkbox option 31</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-30-undefined" name="checkboxgroup[]" value="30" class="checkbox" />
<label for="checkbox-30-undefined">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-" value="category_3" class="checkbox" />
<label for="category_3-">Show all</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-219-undefined" name="checkboxgroup[]" value="219" class="checkbox" />
<label for="checkbox-219-undefined">Checkbox option 219</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-218-undefined" name="checkboxgroup[]" value="218" class="checkbox" />
<label for="checkbox-218-undefined">Checkbox option 218</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-217-undefined" name="checkboxgroup[]" value="217" class="checkbox" />
<label for="checkbox-217-undefined">Checkbox option 217</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-216-undefined" name="checkboxgroup[]" value="216" class="checkbox" />
<label for="checkbox-216-undefined">Checkbox option 216</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-215-undefined" name="checkboxgroup[]" value="215" class="checkbox" />
<label for="checkbox-215-undefined">Checkbox option 215</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-214-undefined" name="checkboxgroup[]" value="214" class="checkbox" />
<label for="checkbox-214-undefined">Checkbox option 214</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-213-undefined" name="checkboxgroup[]" value="213" class="checkbox" />
<label for="checkbox-213-undefined">Checkbox option 213</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-212-undefined" name="checkboxgroup[]" value="212" class="checkbox" />
<label for="checkbox-212-undefined">Checkbox option 212</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-211-undefined" name="checkboxgroup[]" value="211" class="checkbox" />
<label for="checkbox-211-undefined">Checkbox option 211</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-210-undefined" name="checkboxgroup[]" value="210" class="checkbox" />
<label for="checkbox-210-undefined">Checkbox option 210</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-29-undefined" name="checkboxgroup[]" value="29" class="checkbox" />
<label for="checkbox-29-undefined">Checkbox option 29</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-28-undefined" name="checkboxgroup[]" value="28" class="checkbox" />
<label for="checkbox-28-undefined">Checkbox option 28</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-27-undefined" name="checkboxgroup[]" value="27" class="checkbox" />
<label for="checkbox-27-undefined">Checkbox option 27</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-26-undefined" name="checkboxgroup[]" value="26" class="checkbox" />
<label for="checkbox-26-undefined">Checkbox option 26</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-25-undefined" name="checkboxgroup[]" value="25" class="checkbox" />
<label for="checkbox-25-undefined">Checkbox option 25</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-24-undefined" name="checkboxgroup[]" value="24" class="checkbox" />
<label for="checkbox-24-undefined">Checkbox option 24</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-23-undefined" name="checkboxgroup[]" value="23" class="checkbox" />
<label for="checkbox-23-undefined">Checkbox option 23</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-22-undefined" name="checkboxgroup[]" value="22" class="checkbox" />
<label for="checkbox-22-undefined">Checkbox option 22</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-21-undefined" name="checkboxgroup[]" value="21" class="checkbox" />
<label for="checkbox-21-undefined">Checkbox option 21</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-20-undefined" name="checkboxgroup[]" value="20" class="checkbox" />
<label for="checkbox-20-undefined">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-" value="category_4" class="checkbox" />
<label for="category_4-">Show all</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-119-undefined" name="checkboxgroup[]" value="119" class="checkbox" />
<label for="checkbox-119-undefined">Checkbox option 119</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-118-undefined" name="checkboxgroup[]" value="118" class="checkbox" />
<label for="checkbox-118-undefined">Checkbox option 118</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-117-undefined" name="checkboxgroup[]" value="117" class="checkbox" />
<label for="checkbox-117-undefined">Checkbox option 117</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-116-undefined" name="checkboxgroup[]" value="116" class="checkbox" />
<label for="checkbox-116-undefined">Checkbox option 116</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-115-undefined" name="checkboxgroup[]" value="115" class="checkbox" />
<label for="checkbox-115-undefined">Checkbox option 115</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-114-undefined" name="checkboxgroup[]" value="114" class="checkbox" />
<label for="checkbox-114-undefined">Checkbox option 114</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-113-undefined" name="checkboxgroup[]" value="113" class="checkbox" />
<label for="checkbox-113-undefined">Checkbox option 113</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-112-undefined" name="checkboxgroup[]" value="112" class="checkbox" />
<label for="checkbox-112-undefined">Checkbox option 112</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-111-undefined" name="checkboxgroup[]" value="111" class="checkbox" />
<label for="checkbox-111-undefined">Checkbox option 111</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-110-undefined" name="checkboxgroup[]" value="110" class="checkbox" />
<label for="checkbox-110-undefined">Checkbox option 110</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-19-undefined" name="checkboxgroup[]" value="19" class="checkbox" />
<label for="checkbox-19-undefined">Checkbox option 19</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-18-undefined" name="checkboxgroup[]" value="18" class="checkbox" />
<label for="checkbox-18-undefined">Checkbox option 18</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-17-undefined" name="checkboxgroup[]" value="17" class="checkbox" />
<label for="checkbox-17-undefined">Checkbox option 17</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-16-undefined" name="checkboxgroup[]" value="16" class="checkbox" />
<label for="checkbox-16-undefined">Checkbox option 16</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-15-undefined" name="checkboxgroup[]" value="15" class="checkbox" />
<label for="checkbox-15-undefined">Checkbox option 15</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-14-undefined" name="checkboxgroup[]" value="14" class="checkbox" />
<label for="checkbox-14-undefined">Checkbox option 14</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-13-undefined" name="checkboxgroup[]" value="13" class="checkbox" />
<label for="checkbox-13-undefined">Checkbox option 13</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-12-undefined" name="checkboxgroup[]" value="12" class="checkbox" />
<label for="checkbox-12-undefined">Checkbox option 12</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-11-undefined" name="checkboxgroup[]" value="11" class="checkbox" />
<label for="checkbox-11-undefined">Checkbox option 11</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-10-undefined" name="checkboxgroup[]" value="10" class="checkbox" />
<label for="checkbox-10-undefined">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-" value="category_5" class="checkbox" />
<label for="category_5-">Show all</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-019-undefined" name="checkboxgroup[]" value="019" class="checkbox" />
<label for="checkbox-019-undefined">Checkbox option 019</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-018-undefined" name="checkboxgroup[]" value="018" class="checkbox" />
<label for="checkbox-018-undefined">Checkbox option 018</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-017-undefined" name="checkboxgroup[]" value="017" class="checkbox" />
<label for="checkbox-017-undefined">Checkbox option 017</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-016-undefined" name="checkboxgroup[]" value="016" class="checkbox" />
<label for="checkbox-016-undefined">Checkbox option 016</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-015-undefined" name="checkboxgroup[]" value="015" class="checkbox" />
<label for="checkbox-015-undefined">Checkbox option 015</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-014-undefined" name="checkboxgroup[]" value="014" class="checkbox" />
<label for="checkbox-014-undefined">Checkbox option 014</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-013-undefined" name="checkboxgroup[]" value="013" class="checkbox" />
<label for="checkbox-013-undefined">Checkbox option 013</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-012-undefined" name="checkboxgroup[]" value="012" class="checkbox" />
<label for="checkbox-012-undefined">Checkbox option 012</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-011-undefined" name="checkboxgroup[]" value="011" class="checkbox" />
<label for="checkbox-011-undefined">Checkbox option 011</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-010-undefined" name="checkboxgroup[]" value="010" class="checkbox" />
<label for="checkbox-010-undefined">Checkbox option 010</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-09-undefined" name="checkboxgroup[]" value="09" class="checkbox" />
<label for="checkbox-09-undefined">Checkbox option 09</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-08-undefined" name="checkboxgroup[]" value="08" class="checkbox" />
<label for="checkbox-08-undefined">Checkbox option 08</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-07-undefined" name="checkboxgroup[]" value="07" class="checkbox" />
<label for="checkbox-07-undefined">Checkbox option 07</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-06-undefined" name="checkboxgroup[]" value="06" class="checkbox" />
<label for="checkbox-06-undefined">Checkbox option 06</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-05-undefined" name="checkboxgroup[]" value="05" class="checkbox" />
<label for="checkbox-05-undefined">Checkbox option 05</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-04-undefined" name="checkboxgroup[]" value="04" class="checkbox" />
<label for="checkbox-04-undefined">Checkbox option 04</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-03-undefined" name="checkboxgroup[]" value="03" class="checkbox" />
<label for="checkbox-03-undefined">Checkbox option 03</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-02-undefined" name="checkboxgroup[]" value="02" class="checkbox" />
<label for="checkbox-02-undefined">Checkbox option 02</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-01-undefined" name="checkboxgroup[]" value="01" class="checkbox" />
<label for="checkbox-01-undefined">Checkbox option 01</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-00-undefined" name="checkboxgroup[]" value="00" class="checkbox" />
<label for="checkbox-00-undefined">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="modal">Confirm selection
</button>
</div>
</div>
<div class="modal-overlay modal-close checkbox-filter__close" data-target="modal" 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="modal" aria-expanded="false">
Select ...
</button>
</div>
<div class="form-item-column">
</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-undefined",
"checkbox_value": "419"
},
{
"label_checkbox": "Checkbox option 418",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-418-undefined",
"checkbox_value": "418"
},
{
"label_checkbox": "Checkbox option 417",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-417-undefined",
"checkbox_value": "417"
},
{
"label_checkbox": "Checkbox option 416",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-416-undefined",
"checkbox_value": "416"
},
{
"label_checkbox": "Checkbox option 415",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-415-undefined",
"checkbox_value": "415"
},
{
"label_checkbox": "Checkbox option 414",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-414-undefined",
"checkbox_value": "414"
},
{
"label_checkbox": "Checkbox option 413",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-413-undefined",
"checkbox_value": "413"
},
{
"label_checkbox": "Checkbox option 412",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-412-undefined",
"checkbox_value": "412"
},
{
"label_checkbox": "Checkbox option 411",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-411-undefined",
"checkbox_value": "411"
},
{
"label_checkbox": "Checkbox option 410",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-410-undefined",
"checkbox_value": "410"
},
{
"label_checkbox": "Checkbox option 49",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-49-undefined",
"checkbox_value": "49"
},
{
"label_checkbox": "Checkbox option 48",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-48-undefined",
"checkbox_value": "48"
},
{
"label_checkbox": "Checkbox option 47",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-47-undefined",
"checkbox_value": "47"
},
{
"label_checkbox": "Checkbox option 46",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-46-undefined",
"checkbox_value": "46"
},
{
"label_checkbox": "Checkbox option 45",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-45-undefined",
"checkbox_value": "45"
},
{
"label_checkbox": "Checkbox option 44",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-44-undefined",
"checkbox_value": "44"
},
{
"label_checkbox": "Checkbox option 43",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-43-undefined",
"checkbox_value": "43"
},
{
"label_checkbox": "Checkbox option 42",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-42-undefined",
"checkbox_value": "42"
},
{
"label_checkbox": "Checkbox option 41",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-41-undefined",
"checkbox_value": "41"
},
{
"label_checkbox": "Checkbox option 40",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-40-undefined",
"checkbox_value": "40"
}
]
},
{
"title": "Category 2",
"value": "category_2",
"items": [
{
"label_checkbox": "Checkbox option 319",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-319-undefined",
"checkbox_value": "319"
},
{
"label_checkbox": "Checkbox option 318",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-318-undefined",
"checkbox_value": "318"
},
{
"label_checkbox": "Checkbox option 317",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-317-undefined",
"checkbox_value": "317"
},
{
"label_checkbox": "Checkbox option 316",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-316-undefined",
"checkbox_value": "316"
},
{
"label_checkbox": "Checkbox option 315",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-315-undefined",
"checkbox_value": "315"
},
{
"label_checkbox": "Checkbox option 314",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-314-undefined",
"checkbox_value": "314"
},
{
"label_checkbox": "Checkbox option 313",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-313-undefined",
"checkbox_value": "313"
},
{
"label_checkbox": "Checkbox option 312",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-312-undefined",
"checkbox_value": "312"
},
{
"label_checkbox": "Checkbox option 311",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-311-undefined",
"checkbox_value": "311"
},
{
"label_checkbox": "Checkbox option 310",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-310-undefined",
"checkbox_value": "310"
},
{
"label_checkbox": "Checkbox option 39",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-39-undefined",
"checkbox_value": "39"
},
{
"label_checkbox": "Checkbox option 38",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-38-undefined",
"checkbox_value": "38"
},
{
"label_checkbox": "Checkbox option 37",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-37-undefined",
"checkbox_value": "37"
},
{
"label_checkbox": "Checkbox option 36",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-36-undefined",
"checkbox_value": "36"
},
{
"label_checkbox": "Checkbox option 35",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-35-undefined",
"checkbox_value": "35"
},
{
"label_checkbox": "Checkbox option 34",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-34-undefined",
"checkbox_value": "34"
},
{
"label_checkbox": "Checkbox option 33",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-33-undefined",
"checkbox_value": "33"
},
{
"label_checkbox": "Checkbox option 32",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-32-undefined",
"checkbox_value": "32"
},
{
"label_checkbox": "Checkbox option 31",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-31-undefined",
"checkbox_value": "31"
},
{
"label_checkbox": "Checkbox option 30",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-30-undefined",
"checkbox_value": "30"
}
]
},
{
"title": "Category 3",
"value": "category_3",
"items": [
{
"label_checkbox": "Checkbox option 219",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-219-undefined",
"checkbox_value": "219"
},
{
"label_checkbox": "Checkbox option 218",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-218-undefined",
"checkbox_value": "218"
},
{
"label_checkbox": "Checkbox option 217",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-217-undefined",
"checkbox_value": "217"
},
{
"label_checkbox": "Checkbox option 216",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-216-undefined",
"checkbox_value": "216"
},
{
"label_checkbox": "Checkbox option 215",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-215-undefined",
"checkbox_value": "215"
},
{
"label_checkbox": "Checkbox option 214",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-214-undefined",
"checkbox_value": "214"
},
{
"label_checkbox": "Checkbox option 213",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-213-undefined",
"checkbox_value": "213"
},
{
"label_checkbox": "Checkbox option 212",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-212-undefined",
"checkbox_value": "212"
},
{
"label_checkbox": "Checkbox option 211",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-211-undefined",
"checkbox_value": "211"
},
{
"label_checkbox": "Checkbox option 210",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-210-undefined",
"checkbox_value": "210"
},
{
"label_checkbox": "Checkbox option 29",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-29-undefined",
"checkbox_value": "29"
},
{
"label_checkbox": "Checkbox option 28",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-28-undefined",
"checkbox_value": "28"
},
{
"label_checkbox": "Checkbox option 27",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-27-undefined",
"checkbox_value": "27"
},
{
"label_checkbox": "Checkbox option 26",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-26-undefined",
"checkbox_value": "26"
},
{
"label_checkbox": "Checkbox option 25",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-25-undefined",
"checkbox_value": "25"
},
{
"label_checkbox": "Checkbox option 24",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-24-undefined",
"checkbox_value": "24"
},
{
"label_checkbox": "Checkbox option 23",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-23-undefined",
"checkbox_value": "23"
},
{
"label_checkbox": "Checkbox option 22",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-22-undefined",
"checkbox_value": "22"
},
{
"label_checkbox": "Checkbox option 21",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-21-undefined",
"checkbox_value": "21"
},
{
"label_checkbox": "Checkbox option 20",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-20-undefined",
"checkbox_value": "20"
}
]
},
{
"title": "Category 4",
"value": "category_4",
"items": [
{
"label_checkbox": "Checkbox option 119",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-119-undefined",
"checkbox_value": "119"
},
{
"label_checkbox": "Checkbox option 118",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-118-undefined",
"checkbox_value": "118"
},
{
"label_checkbox": "Checkbox option 117",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-117-undefined",
"checkbox_value": "117"
},
{
"label_checkbox": "Checkbox option 116",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-116-undefined",
"checkbox_value": "116"
},
{
"label_checkbox": "Checkbox option 115",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-115-undefined",
"checkbox_value": "115"
},
{
"label_checkbox": "Checkbox option 114",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-114-undefined",
"checkbox_value": "114"
},
{
"label_checkbox": "Checkbox option 113",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-113-undefined",
"checkbox_value": "113"
},
{
"label_checkbox": "Checkbox option 112",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-112-undefined",
"checkbox_value": "112"
},
{
"label_checkbox": "Checkbox option 111",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-111-undefined",
"checkbox_value": "111"
},
{
"label_checkbox": "Checkbox option 110",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-110-undefined",
"checkbox_value": "110"
},
{
"label_checkbox": "Checkbox option 19",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-19-undefined",
"checkbox_value": "19"
},
{
"label_checkbox": "Checkbox option 18",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-18-undefined",
"checkbox_value": "18"
},
{
"label_checkbox": "Checkbox option 17",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-17-undefined",
"checkbox_value": "17"
},
{
"label_checkbox": "Checkbox option 16",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-16-undefined",
"checkbox_value": "16"
},
{
"label_checkbox": "Checkbox option 15",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-15-undefined",
"checkbox_value": "15"
},
{
"label_checkbox": "Checkbox option 14",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-14-undefined",
"checkbox_value": "14"
},
{
"label_checkbox": "Checkbox option 13",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-13-undefined",
"checkbox_value": "13"
},
{
"label_checkbox": "Checkbox option 12",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-12-undefined",
"checkbox_value": "12"
},
{
"label_checkbox": "Checkbox option 11",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-11-undefined",
"checkbox_value": "11"
},
{
"label_checkbox": "Checkbox option 10",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-10-undefined",
"checkbox_value": "10"
}
]
},
{
"title": "Category 5",
"value": "category_5",
"items": [
{
"label_checkbox": "Checkbox option 019",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-019-undefined",
"checkbox_value": "019"
},
{
"label_checkbox": "Checkbox option 018",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-018-undefined",
"checkbox_value": "018"
},
{
"label_checkbox": "Checkbox option 017",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-017-undefined",
"checkbox_value": "017"
},
{
"label_checkbox": "Checkbox option 016",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-016-undefined",
"checkbox_value": "016"
},
{
"label_checkbox": "Checkbox option 015",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-015-undefined",
"checkbox_value": "015"
},
{
"label_checkbox": "Checkbox option 014",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-014-undefined",
"checkbox_value": "014"
},
{
"label_checkbox": "Checkbox option 013",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-013-undefined",
"checkbox_value": "013"
},
{
"label_checkbox": "Checkbox option 012",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-012-undefined",
"checkbox_value": "012"
},
{
"label_checkbox": "Checkbox option 011",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-011-undefined",
"checkbox_value": "011"
},
{
"label_checkbox": "Checkbox option 010",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-010-undefined",
"checkbox_value": "010"
},
{
"label_checkbox": "Checkbox option 09",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-09-undefined",
"checkbox_value": "09"
},
{
"label_checkbox": "Checkbox option 08",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-08-undefined",
"checkbox_value": "08"
},
{
"label_checkbox": "Checkbox option 07",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-07-undefined",
"checkbox_value": "07"
},
{
"label_checkbox": "Checkbox option 06",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-06-undefined",
"checkbox_value": "06"
},
{
"label_checkbox": "Checkbox option 05",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-05-undefined",
"checkbox_value": "05"
},
{
"label_checkbox": "Checkbox option 04",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-04-undefined",
"checkbox_value": "04"
},
{
"label_checkbox": "Checkbox option 03",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-03-undefined",
"checkbox_value": "03"
},
{
"label_checkbox": "Checkbox option 02",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-02-undefined",
"checkbox_value": "02"
},
{
"label_checkbox": "Checkbox option 01",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-01-undefined",
"checkbox_value": "01"
},
{
"label_checkbox": "Checkbox option 00",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-00-undefined",
"checkbox_value": "00"
}
]
}
]
}
.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 {};
};
});