Filter checkbox @filter-checkbox
A filter checkbox that looks like @button. Filter checkboxes must contain text with optional icons. Part of @filter-checkbox-group.
Primary @filter-checkbox
<div class="filter-checkbox"><label class="filter-checkbox__checkbox"><input class="filter-checkbox__checkbox-input" type="checkbox" value="filter-checkbox-value-46c4" id="filter-checkbox-5a7e" name="filter-checkbox-5a7e" /><span class="filter-checkbox__checkbox-label">Filter Checkbox</span>
<div class="filter-checkbox__checkbox-bg"></div></label></div>{
"text": "Filter Checkbox"
}
Primary (checked) @filter-checkbox--default--checked
<div class="filter-checkbox"><label class="filter-checkbox__checkbox"><input class="filter-checkbox__checkbox-input" type="checkbox" value="filter-checkbox-value-fef9" checked="checked" id="filter-checkbox-bff4" name="filter-checkbox-bff4" /><span class="filter-checkbox__checkbox-label">Filter Checkbox</span>
<div class="filter-checkbox__checkbox-bg"></div></label></div>{
"text": "Filter Checkbox",
"checked": true
}
Primary disabled @filter-checkbox--disabled
<div class="filter-checkbox filter-checkbox--disabled"><label class="filter-checkbox__checkbox"><input class="filter-checkbox__checkbox-input" type="checkbox" value="filter-checkbox-value-664e" disabled="disabled" id="filter-checkbox-aca8" name="filter-checkbox-aca8" /><span class="filter-checkbox__checkbox-label">Filter Checkbox</span>
<div class="filter-checkbox__checkbox-bg"></div></label></div>{
"text": "Filter Checkbox",
"disabled": true
}
Icon right @filter-checkbox--icon-right
<div class="filter-checkbox"><label class="filter-checkbox__checkbox"><input class="filter-checkbox__checkbox-input" type="checkbox" value="filter-checkbox-value-e3d5" id="filter-checkbox-0949" name="filter-checkbox-0949" /><span class="filter-checkbox__checkbox-label">Filter Checkbox</span>
<div class="filter-checkbox__checkbox-bg"></div><svg class="icon icon--plus filter-checkbox__checkbox-icon-right" viewBox="0 0 200 200">
<use xlink:href="#icon-plus"></use>
</svg></label></div>{
"text": "Filter Checkbox",
"icon": "plus",
"iconSide": "right"
}
Icon right (checked) @filter-checkbox--icon-right--checked
<div class="filter-checkbox"><label class="filter-checkbox__checkbox"><input class="filter-checkbox__checkbox-input" type="checkbox" value="filter-checkbox-value-d992" checked="checked" id="filter-checkbox-17bc" name="filter-checkbox-17bc" /><span class="filter-checkbox__checkbox-label">Filter Checkbox</span>
<div class="filter-checkbox__checkbox-bg"></div><svg class="icon icon--plus filter-checkbox__checkbox-icon-right" viewBox="0 0 200 200">
<use xlink:href="#icon-plus"></use>
</svg></label></div>{
"text": "Filter Checkbox",
"icon": "plus",
"iconSide": "right",
"checked": true
}
Icon left @filter-checkbox--icon
<div class="filter-checkbox filter-checkbox--left"><label class="filter-checkbox__checkbox"><input class="filter-checkbox__checkbox-input" type="checkbox" value="filter-checkbox-value-b3b9" id="filter-checkbox-e93e" name="filter-checkbox-e93e" /><span class="filter-checkbox__checkbox-label">Filter Checkbox</span>
<div class="filter-checkbox__checkbox-bg"></div><svg class="icon icon--arrow-right filter-checkbox__checkbox-icon-left" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-right"></use>
</svg></label></div>{
"text": "Filter Checkbox",
"iconLeft": true,
"icon": "arrow-right"
}
Icon left (checked) @filter-checkbox--icon--checked
<div class="filter-checkbox filter-checkbox--left"><label class="filter-checkbox__checkbox"><input class="filter-checkbox__checkbox-input" type="checkbox" value="filter-checkbox-value-e984" checked="checked" id="filter-checkbox-67b1" name="filter-checkbox-67b1" /><span class="filter-checkbox__checkbox-label">Filter Checkbox</span>
<div class="filter-checkbox__checkbox-bg"></div><svg class="icon icon--arrow-right filter-checkbox__checkbox-icon-left" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-right"></use>
</svg></label></div>{
"text": "Filter Checkbox",
"iconLeft": true,
"icon": "arrow-right",
"checked": true
}