DEPRECATED: do no longer use this component. It has been replaced by checkboxes dynamic
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 error 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="modalerror" class="modal modal--fixed-height checkbox-filter__modal" role="dialog" aria-modal="true" aria-labelledby="modalerror-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="modalerror">
<span>Close</span>
</button>
</div>
<div class="modal-content" tabindex="0">
<h3 id="modalerror-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_error">Filter the list
below</label>
<div class="form-item checkbox-filter__filter__search-wrapper">
<input type="search" id="checkboxes__filter_id_error" 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-error" value="category_1" class="checkbox error" />
<label for="category_1-error">Show all</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-419-default" name="checkboxgroup[]" value="419" class="checkbox error" />
<label for="checkbox-419-default">Checkbox option 419</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-418-default" name="checkboxgroup[]" value="418" class="checkbox error" />
<label for="checkbox-418-default">Checkbox option 418</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-417-default" name="checkboxgroup[]" value="417" class="checkbox error" />
<label for="checkbox-417-default">Checkbox option 417</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-416-default" name="checkboxgroup[]" value="416" class="checkbox error" />
<label for="checkbox-416-default">Checkbox option 416</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-415-default" name="checkboxgroup[]" value="415" class="checkbox error" />
<label for="checkbox-415-default">Checkbox option 415</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-414-default" name="checkboxgroup[]" value="414" class="checkbox error" />
<label for="checkbox-414-default">Checkbox option 414</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-413-default" name="checkboxgroup[]" value="413" class="checkbox error" />
<label for="checkbox-413-default">Checkbox option 413</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-412-default" name="checkboxgroup[]" value="412" class="checkbox error" />
<label for="checkbox-412-default">Checkbox option 412</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-411-default" name="checkboxgroup[]" value="411" class="checkbox error" />
<label for="checkbox-411-default">Checkbox option 411</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-410-default" name="checkboxgroup[]" value="410" class="checkbox error" />
<label for="checkbox-410-default">Checkbox option 410</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-49-default" name="checkboxgroup[]" value="49" class="checkbox error" />
<label for="checkbox-49-default">Checkbox option 49</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-48-default" name="checkboxgroup[]" value="48" class="checkbox error" />
<label for="checkbox-48-default">Checkbox option 48</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-47-default" name="checkboxgroup[]" value="47" class="checkbox error" />
<label for="checkbox-47-default">Checkbox option 47</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-46-default" name="checkboxgroup[]" value="46" class="checkbox error" />
<label for="checkbox-46-default">Checkbox option 46</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-45-default" name="checkboxgroup[]" value="45" class="checkbox error" />
<label for="checkbox-45-default">Checkbox option 45</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-44-default" name="checkboxgroup[]" value="44" class="checkbox error" />
<label for="checkbox-44-default">Checkbox option 44</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-43-default" name="checkboxgroup[]" value="43" class="checkbox error" />
<label for="checkbox-43-default">Checkbox option 43</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-42-default" name="checkboxgroup[]" value="42" class="checkbox error" />
<label for="checkbox-42-default">Checkbox option 42</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-41-default" name="checkboxgroup[]" value="41" class="checkbox error" />
<label for="checkbox-41-default">Checkbox option 41</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-40-default" name="checkboxgroup[]" value="40" class="checkbox error" />
<label for="checkbox-40-default">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-error" value="category_2" class="checkbox error" />
<label for="category_2-error">Show all</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-319-default" name="checkboxgroup[]" value="319" class="checkbox error" />
<label for="checkbox-319-default">Checkbox option 319</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-318-default" name="checkboxgroup[]" value="318" class="checkbox error" />
<label for="checkbox-318-default">Checkbox option 318</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-317-default" name="checkboxgroup[]" value="317" class="checkbox error" />
<label for="checkbox-317-default">Checkbox option 317</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-316-default" name="checkboxgroup[]" value="316" class="checkbox error" />
<label for="checkbox-316-default">Checkbox option 316</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-315-default" name="checkboxgroup[]" value="315" class="checkbox error" />
<label for="checkbox-315-default">Checkbox option 315</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-314-default" name="checkboxgroup[]" value="314" class="checkbox error" />
<label for="checkbox-314-default">Checkbox option 314</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-313-default" name="checkboxgroup[]" value="313" class="checkbox error" />
<label for="checkbox-313-default">Checkbox option 313</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-312-default" name="checkboxgroup[]" value="312" class="checkbox error" />
<label for="checkbox-312-default">Checkbox option 312</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-311-default" name="checkboxgroup[]" value="311" class="checkbox error" />
<label for="checkbox-311-default">Checkbox option 311</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-310-default" name="checkboxgroup[]" value="310" class="checkbox error" />
<label for="checkbox-310-default">Checkbox option 310</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-39-default" name="checkboxgroup[]" value="39" class="checkbox error" />
<label for="checkbox-39-default">Checkbox option 39</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-38-default" name="checkboxgroup[]" value="38" class="checkbox error" />
<label for="checkbox-38-default">Checkbox option 38</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-37-default" name="checkboxgroup[]" value="37" class="checkbox error" />
<label for="checkbox-37-default">Checkbox option 37</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-36-default" name="checkboxgroup[]" value="36" class="checkbox error" />
<label for="checkbox-36-default">Checkbox option 36</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-35-default" name="checkboxgroup[]" value="35" class="checkbox error" />
<label for="checkbox-35-default">Checkbox option 35</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-34-default" name="checkboxgroup[]" value="34" class="checkbox error" />
<label for="checkbox-34-default">Checkbox option 34</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-33-default" name="checkboxgroup[]" value="33" class="checkbox error" />
<label for="checkbox-33-default">Checkbox option 33</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-32-default" name="checkboxgroup[]" value="32" class="checkbox error" />
<label for="checkbox-32-default">Checkbox option 32</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-31-default" name="checkboxgroup[]" value="31" class="checkbox error" />
<label for="checkbox-31-default">Checkbox option 31</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-30-default" name="checkboxgroup[]" value="30" class="checkbox error" />
<label for="checkbox-30-default">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-error" value="category_3" class="checkbox error" />
<label for="category_3-error">Show all</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-219-default" name="checkboxgroup[]" value="219" class="checkbox error" />
<label for="checkbox-219-default">Checkbox option 219</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-218-default" name="checkboxgroup[]" value="218" class="checkbox error" />
<label for="checkbox-218-default">Checkbox option 218</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-217-default" name="checkboxgroup[]" value="217" class="checkbox error" />
<label for="checkbox-217-default">Checkbox option 217</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-216-default" name="checkboxgroup[]" value="216" class="checkbox error" />
<label for="checkbox-216-default">Checkbox option 216</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-215-default" name="checkboxgroup[]" value="215" class="checkbox error" />
<label for="checkbox-215-default">Checkbox option 215</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-214-default" name="checkboxgroup[]" value="214" class="checkbox error" />
<label for="checkbox-214-default">Checkbox option 214</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-213-default" name="checkboxgroup[]" value="213" class="checkbox error" />
<label for="checkbox-213-default">Checkbox option 213</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-212-default" name="checkboxgroup[]" value="212" class="checkbox error" />
<label for="checkbox-212-default">Checkbox option 212</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-211-default" name="checkboxgroup[]" value="211" class="checkbox error" />
<label for="checkbox-211-default">Checkbox option 211</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-210-default" name="checkboxgroup[]" value="210" class="checkbox error" />
<label for="checkbox-210-default">Checkbox option 210</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-29-default" name="checkboxgroup[]" value="29" class="checkbox error" />
<label for="checkbox-29-default">Checkbox option 29</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-28-default" name="checkboxgroup[]" value="28" class="checkbox error" />
<label for="checkbox-28-default">Checkbox option 28</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-27-default" name="checkboxgroup[]" value="27" class="checkbox error" />
<label for="checkbox-27-default">Checkbox option 27</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-26-default" name="checkboxgroup[]" value="26" class="checkbox error" />
<label for="checkbox-26-default">Checkbox option 26</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-25-default" name="checkboxgroup[]" value="25" class="checkbox error" />
<label for="checkbox-25-default">Checkbox option 25</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-24-default" name="checkboxgroup[]" value="24" class="checkbox error" />
<label for="checkbox-24-default">Checkbox option 24</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-23-default" name="checkboxgroup[]" value="23" class="checkbox error" />
<label for="checkbox-23-default">Checkbox option 23</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-22-default" name="checkboxgroup[]" value="22" class="checkbox error" />
<label for="checkbox-22-default">Checkbox option 22</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-21-default" name="checkboxgroup[]" value="21" class="checkbox error" />
<label for="checkbox-21-default">Checkbox option 21</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-20-default" name="checkboxgroup[]" value="20" class="checkbox error" />
<label for="checkbox-20-default">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-error" value="category_4" class="checkbox error" />
<label for="category_4-error">Show all</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-119-default" name="checkboxgroup[]" value="119" class="checkbox error" />
<label for="checkbox-119-default">Checkbox option 119</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-118-default" name="checkboxgroup[]" value="118" class="checkbox error" />
<label for="checkbox-118-default">Checkbox option 118</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-117-default" name="checkboxgroup[]" value="117" class="checkbox error" />
<label for="checkbox-117-default">Checkbox option 117</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-116-default" name="checkboxgroup[]" value="116" class="checkbox error" />
<label for="checkbox-116-default">Checkbox option 116</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-115-default" name="checkboxgroup[]" value="115" class="checkbox error" />
<label for="checkbox-115-default">Checkbox option 115</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-114-default" name="checkboxgroup[]" value="114" class="checkbox error" />
<label for="checkbox-114-default">Checkbox option 114</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-113-default" name="checkboxgroup[]" value="113" class="checkbox error" />
<label for="checkbox-113-default">Checkbox option 113</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-112-default" name="checkboxgroup[]" value="112" class="checkbox error" />
<label for="checkbox-112-default">Checkbox option 112</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-111-default" name="checkboxgroup[]" value="111" class="checkbox error" />
<label for="checkbox-111-default">Checkbox option 111</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-110-default" name="checkboxgroup[]" value="110" class="checkbox error" />
<label for="checkbox-110-default">Checkbox option 110</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-19-default" name="checkboxgroup[]" value="19" class="checkbox error" />
<label for="checkbox-19-default">Checkbox option 19</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-18-default" name="checkboxgroup[]" value="18" class="checkbox error" />
<label for="checkbox-18-default">Checkbox option 18</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-17-default" name="checkboxgroup[]" value="17" class="checkbox error" />
<label for="checkbox-17-default">Checkbox option 17</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-16-default" name="checkboxgroup[]" value="16" class="checkbox error" />
<label for="checkbox-16-default">Checkbox option 16</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-15-default" name="checkboxgroup[]" value="15" class="checkbox error" />
<label for="checkbox-15-default">Checkbox option 15</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-14-default" name="checkboxgroup[]" value="14" class="checkbox error" />
<label for="checkbox-14-default">Checkbox option 14</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-13-default" name="checkboxgroup[]" value="13" class="checkbox error" />
<label for="checkbox-13-default">Checkbox option 13</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-12-default" name="checkboxgroup[]" value="12" class="checkbox error" />
<label for="checkbox-12-default">Checkbox option 12</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-11-default" name="checkboxgroup[]" value="11" class="checkbox error" />
<label for="checkbox-11-default">Checkbox option 11</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-10-default" name="checkboxgroup[]" value="10" class="checkbox error" />
<label for="checkbox-10-default">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-error" value="category_5" class="checkbox error" />
<label for="category_5-error">Show all</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-019-default" name="checkboxgroup[]" value="019" class="checkbox error" />
<label for="checkbox-019-default">Checkbox option 019</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-018-default" name="checkboxgroup[]" value="018" class="checkbox error" />
<label for="checkbox-018-default">Checkbox option 018</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-017-default" name="checkboxgroup[]" value="017" class="checkbox error" />
<label for="checkbox-017-default">Checkbox option 017</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-016-default" name="checkboxgroup[]" value="016" class="checkbox error" />
<label for="checkbox-016-default">Checkbox option 016</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-015-default" name="checkboxgroup[]" value="015" class="checkbox error" />
<label for="checkbox-015-default">Checkbox option 015</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-014-default" name="checkboxgroup[]" value="014" class="checkbox error" />
<label for="checkbox-014-default">Checkbox option 014</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-013-default" name="checkboxgroup[]" value="013" class="checkbox error" />
<label for="checkbox-013-default">Checkbox option 013</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-012-default" name="checkboxgroup[]" value="012" class="checkbox error" />
<label for="checkbox-012-default">Checkbox option 012</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-011-default" name="checkboxgroup[]" value="011" class="checkbox error" />
<label for="checkbox-011-default">Checkbox option 011</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-010-default" name="checkboxgroup[]" value="010" class="checkbox error" />
<label for="checkbox-010-default">Checkbox option 010</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-09-default" name="checkboxgroup[]" value="09" class="checkbox error" />
<label for="checkbox-09-default">Checkbox option 09</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-08-default" name="checkboxgroup[]" value="08" class="checkbox error" />
<label for="checkbox-08-default">Checkbox option 08</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-07-default" name="checkboxgroup[]" value="07" class="checkbox error" />
<label for="checkbox-07-default">Checkbox option 07</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-06-default" name="checkboxgroup[]" value="06" class="checkbox error" />
<label for="checkbox-06-default">Checkbox option 06</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-05-default" name="checkboxgroup[]" value="05" class="checkbox error" />
<label for="checkbox-05-default">Checkbox option 05</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-04-default" name="checkboxgroup[]" value="04" class="checkbox error" />
<label for="checkbox-04-default">Checkbox option 04</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-03-default" name="checkboxgroup[]" value="03" class="checkbox error" />
<label for="checkbox-03-default">Checkbox option 03</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-02-default" name="checkboxgroup[]" value="02" class="checkbox error" />
<label for="checkbox-02-default">Checkbox option 02</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-01-default" name="checkboxgroup[]" value="01" class="checkbox error" />
<label for="checkbox-01-default">Checkbox option 01</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-00-default" name="checkboxgroup[]" value="00" class="checkbox error" />
<label for="checkbox-00-default">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="modalerror">Confirm selection
</button>
</div>
</div>
<div class="modal-overlay modal-close checkbox-filter__close" data-target="modalerror" 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="modalerror" aria-expanded="false">
Select ...
</button>
</div>
<div class="form-item-column">
<div class="field-message error" 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-default",
"checkbox_value": "419"
},
{
"label_checkbox": "Checkbox option 418",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-418-default",
"checkbox_value": "418"
},
{
"label_checkbox": "Checkbox option 417",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-417-default",
"checkbox_value": "417"
},
{
"label_checkbox": "Checkbox option 416",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-416-default",
"checkbox_value": "416"
},
{
"label_checkbox": "Checkbox option 415",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-415-default",
"checkbox_value": "415"
},
{
"label_checkbox": "Checkbox option 414",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-414-default",
"checkbox_value": "414"
},
{
"label_checkbox": "Checkbox option 413",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-413-default",
"checkbox_value": "413"
},
{
"label_checkbox": "Checkbox option 412",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-412-default",
"checkbox_value": "412"
},
{
"label_checkbox": "Checkbox option 411",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-411-default",
"checkbox_value": "411"
},
{
"label_checkbox": "Checkbox option 410",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-410-default",
"checkbox_value": "410"
},
{
"label_checkbox": "Checkbox option 49",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-49-default",
"checkbox_value": "49"
},
{
"label_checkbox": "Checkbox option 48",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-48-default",
"checkbox_value": "48"
},
{
"label_checkbox": "Checkbox option 47",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-47-default",
"checkbox_value": "47"
},
{
"label_checkbox": "Checkbox option 46",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-46-default",
"checkbox_value": "46"
},
{
"label_checkbox": "Checkbox option 45",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-45-default",
"checkbox_value": "45"
},
{
"label_checkbox": "Checkbox option 44",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-44-default",
"checkbox_value": "44"
},
{
"label_checkbox": "Checkbox option 43",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-43-default",
"checkbox_value": "43"
},
{
"label_checkbox": "Checkbox option 42",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-42-default",
"checkbox_value": "42"
},
{
"label_checkbox": "Checkbox option 41",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-41-default",
"checkbox_value": "41"
},
{
"label_checkbox": "Checkbox option 40",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-40-default",
"checkbox_value": "40"
}
]
},
{
"title": "Category 2",
"value": "category_2",
"items": [
{
"label_checkbox": "Checkbox option 319",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-319-default",
"checkbox_value": "319"
},
{
"label_checkbox": "Checkbox option 318",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-318-default",
"checkbox_value": "318"
},
{
"label_checkbox": "Checkbox option 317",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-317-default",
"checkbox_value": "317"
},
{
"label_checkbox": "Checkbox option 316",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-316-default",
"checkbox_value": "316"
},
{
"label_checkbox": "Checkbox option 315",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-315-default",
"checkbox_value": "315"
},
{
"label_checkbox": "Checkbox option 314",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-314-default",
"checkbox_value": "314"
},
{
"label_checkbox": "Checkbox option 313",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-313-default",
"checkbox_value": "313"
},
{
"label_checkbox": "Checkbox option 312",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-312-default",
"checkbox_value": "312"
},
{
"label_checkbox": "Checkbox option 311",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-311-default",
"checkbox_value": "311"
},
{
"label_checkbox": "Checkbox option 310",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-310-default",
"checkbox_value": "310"
},
{
"label_checkbox": "Checkbox option 39",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-39-default",
"checkbox_value": "39"
},
{
"label_checkbox": "Checkbox option 38",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-38-default",
"checkbox_value": "38"
},
{
"label_checkbox": "Checkbox option 37",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-37-default",
"checkbox_value": "37"
},
{
"label_checkbox": "Checkbox option 36",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-36-default",
"checkbox_value": "36"
},
{
"label_checkbox": "Checkbox option 35",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-35-default",
"checkbox_value": "35"
},
{
"label_checkbox": "Checkbox option 34",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-34-default",
"checkbox_value": "34"
},
{
"label_checkbox": "Checkbox option 33",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-33-default",
"checkbox_value": "33"
},
{
"label_checkbox": "Checkbox option 32",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-32-default",
"checkbox_value": "32"
},
{
"label_checkbox": "Checkbox option 31",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-31-default",
"checkbox_value": "31"
},
{
"label_checkbox": "Checkbox option 30",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-30-default",
"checkbox_value": "30"
}
]
},
{
"title": "Category 3",
"value": "category_3",
"items": [
{
"label_checkbox": "Checkbox option 219",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-219-default",
"checkbox_value": "219"
},
{
"label_checkbox": "Checkbox option 218",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-218-default",
"checkbox_value": "218"
},
{
"label_checkbox": "Checkbox option 217",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-217-default",
"checkbox_value": "217"
},
{
"label_checkbox": "Checkbox option 216",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-216-default",
"checkbox_value": "216"
},
{
"label_checkbox": "Checkbox option 215",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-215-default",
"checkbox_value": "215"
},
{
"label_checkbox": "Checkbox option 214",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-214-default",
"checkbox_value": "214"
},
{
"label_checkbox": "Checkbox option 213",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-213-default",
"checkbox_value": "213"
},
{
"label_checkbox": "Checkbox option 212",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-212-default",
"checkbox_value": "212"
},
{
"label_checkbox": "Checkbox option 211",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-211-default",
"checkbox_value": "211"
},
{
"label_checkbox": "Checkbox option 210",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-210-default",
"checkbox_value": "210"
},
{
"label_checkbox": "Checkbox option 29",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-29-default",
"checkbox_value": "29"
},
{
"label_checkbox": "Checkbox option 28",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-28-default",
"checkbox_value": "28"
},
{
"label_checkbox": "Checkbox option 27",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-27-default",
"checkbox_value": "27"
},
{
"label_checkbox": "Checkbox option 26",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-26-default",
"checkbox_value": "26"
},
{
"label_checkbox": "Checkbox option 25",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-25-default",
"checkbox_value": "25"
},
{
"label_checkbox": "Checkbox option 24",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-24-default",
"checkbox_value": "24"
},
{
"label_checkbox": "Checkbox option 23",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-23-default",
"checkbox_value": "23"
},
{
"label_checkbox": "Checkbox option 22",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-22-default",
"checkbox_value": "22"
},
{
"label_checkbox": "Checkbox option 21",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-21-default",
"checkbox_value": "21"
},
{
"label_checkbox": "Checkbox option 20",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-20-default",
"checkbox_value": "20"
}
]
},
{
"title": "Category 4",
"value": "category_4",
"items": [
{
"label_checkbox": "Checkbox option 119",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-119-default",
"checkbox_value": "119"
},
{
"label_checkbox": "Checkbox option 118",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-118-default",
"checkbox_value": "118"
},
{
"label_checkbox": "Checkbox option 117",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-117-default",
"checkbox_value": "117"
},
{
"label_checkbox": "Checkbox option 116",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-116-default",
"checkbox_value": "116"
},
{
"label_checkbox": "Checkbox option 115",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-115-default",
"checkbox_value": "115"
},
{
"label_checkbox": "Checkbox option 114",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-114-default",
"checkbox_value": "114"
},
{
"label_checkbox": "Checkbox option 113",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-113-default",
"checkbox_value": "113"
},
{
"label_checkbox": "Checkbox option 112",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-112-default",
"checkbox_value": "112"
},
{
"label_checkbox": "Checkbox option 111",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-111-default",
"checkbox_value": "111"
},
{
"label_checkbox": "Checkbox option 110",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-110-default",
"checkbox_value": "110"
},
{
"label_checkbox": "Checkbox option 19",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-19-default",
"checkbox_value": "19"
},
{
"label_checkbox": "Checkbox option 18",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-18-default",
"checkbox_value": "18"
},
{
"label_checkbox": "Checkbox option 17",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-17-default",
"checkbox_value": "17"
},
{
"label_checkbox": "Checkbox option 16",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-16-default",
"checkbox_value": "16"
},
{
"label_checkbox": "Checkbox option 15",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-15-default",
"checkbox_value": "15"
},
{
"label_checkbox": "Checkbox option 14",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-14-default",
"checkbox_value": "14"
},
{
"label_checkbox": "Checkbox option 13",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-13-default",
"checkbox_value": "13"
},
{
"label_checkbox": "Checkbox option 12",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-12-default",
"checkbox_value": "12"
},
{
"label_checkbox": "Checkbox option 11",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-11-default",
"checkbox_value": "11"
},
{
"label_checkbox": "Checkbox option 10",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-10-default",
"checkbox_value": "10"
}
]
},
{
"title": "Category 5",
"value": "category_5",
"items": [
{
"label_checkbox": "Checkbox option 019",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-019-default",
"checkbox_value": "019"
},
{
"label_checkbox": "Checkbox option 018",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-018-default",
"checkbox_value": "018"
},
{
"label_checkbox": "Checkbox option 017",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-017-default",
"checkbox_value": "017"
},
{
"label_checkbox": "Checkbox option 016",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-016-default",
"checkbox_value": "016"
},
{
"label_checkbox": "Checkbox option 015",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-015-default",
"checkbox_value": "015"
},
{
"label_checkbox": "Checkbox option 014",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-014-default",
"checkbox_value": "014"
},
{
"label_checkbox": "Checkbox option 013",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-013-default",
"checkbox_value": "013"
},
{
"label_checkbox": "Checkbox option 012",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-012-default",
"checkbox_value": "012"
},
{
"label_checkbox": "Checkbox option 011",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-011-default",
"checkbox_value": "011"
},
{
"label_checkbox": "Checkbox option 010",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-010-default",
"checkbox_value": "010"
},
{
"label_checkbox": "Checkbox option 09",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-09-default",
"checkbox_value": "09"
},
{
"label_checkbox": "Checkbox option 08",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-08-default",
"checkbox_value": "08"
},
{
"label_checkbox": "Checkbox option 07",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-07-default",
"checkbox_value": "07"
},
{
"label_checkbox": "Checkbox option 06",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-06-default",
"checkbox_value": "06"
},
{
"label_checkbox": "Checkbox option 05",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-05-default",
"checkbox_value": "05"
},
{
"label_checkbox": "Checkbox option 04",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-04-default",
"checkbox_value": "04"
},
{
"label_checkbox": "Checkbox option 03",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-03-default",
"checkbox_value": "03"
},
{
"label_checkbox": "Checkbox option 02",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-02-default",
"checkbox_value": "02"
},
{
"label_checkbox": "Checkbox option 01",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-01-default",
"checkbox_value": "01"
},
{
"label_checkbox": "Checkbox option 00",
"checkbox_name": "checkboxgroup[]",
"checkbox_id": "checkbox-00-default",
"checkbox_value": "00"
}
]
}
],
"modifier": "error"
}
.checkbox-filter {
.checkbox-filter__count-wrapper {
&.hidden {
@extend %visually-hidden
}
em {
font-style: normal;
}
}
.checkbox-filter__result-placeholder {
&.hidden {
display: none;
}
}
}
.checkbox-filter__modal {
.tag {
margin: 0 .5rem .5rem 0;
}
.checkbox-filter__filter__search-wrapper {
max-width: 30rem;
@include desktop {
display: flex;
}
input,
p {
margin-bottom: 0;
}
}
.checkbox-filter__filter {
margin-bottom: 1rem;
}
.checkbox-filter__result-wrapper {
&.hidden {
display: none;
}
em {
font-style: normal;
}
@include desktop {
margin-left: 1rem;
line-height: 2.4rem;
white-space: nowrap;
}
}
.checkbox-filter__checkboxes {
display: flex;
flex: 1;
flex-wrap: wrap;
> .checkbox {
flex-basis: 320px;
padding-right: 1rem;
}
> .checkbox.full-width,
> .checkbox-filter__category {
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';
(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 {};
};
});