The multi-select filtering component is an innovative dropdown style component (menu that expands with a click of a button) that allows multiple options of a group to be easily selected or unselected in one go as filters, to alter the result listings of a page.
The multi-select filtering component
A tick on the left of each option indicates that this option has been selected (checked), while there is an internal search function that filters the available options while typing, to make selections even easier.
The tick-box that is located on the left of the search input, checks or unchecks all the items that are currently in view inside the component – if nothing is typed in the internal search input all items are checked or unchecked , while if something is typed and options are filtered, only those options are toggled in checked-unchecked state.
Clicking on Done submits the selected options as result filters and the results of the current page change accordingly. The number that appears on this button indicates the number of the checked options. For convenience, the number of checked options also appears on the component button that opens the drop-down list of options.