JS Filterable is used for creating lists of filterable items. Items are marked with the class
is-filtered-out if they do not match the search query and at least one value for each active tag group.
Items can be filtered by a query string. The query string is entered via an input tag given the class
Areas within an item that should be searchable by query must be contained in an element with the class
A tag is a key-value pair (K, V), where K is a string representing the name of the tag (e.g. "color") and V is an array of strings representing the possible values of that tag (e.g. ["red", "blue", "green"] ). Tags can be chosen using 3 types of inputs: checkboxes, radios, and select dropdowns.
Radios and select dropdowns should be used for tags where only one active value can be selected at a time. Any items that don't match the active value for each tag key will be filtered out.
Checkboxes should be used for tags where multiple active values can be selected at a time. Any items that don't match at least one active value for each tag key will be filtered out.
By applying this data attribute to the
.js-filterable element, any changes to filterable form elements (i.e. select dropdowns, checkboxes, radio buttons, and search text fields) will automatically trigger the