This pattern provides the ability to search and apply filter chips with a panel listing available options.
When a selection is made a chip is prepended to the input container.
Please use toggle the
aria-hidden attribute on the
.p-search-and-filter__panel element when you want to reveal the filter panel. When a user makes a selection you can append a chip element to the
When the selection reaches the end of the container the chips wrap and should display the number of wrapping chips in the selected-count element. The element becomes a hit target to expand the selected chips section.
When a click event is triggered on the selected-count element you need need to toggle three states.
.p-search-and-filter__boxdata-overflow attribute from false to true
.p-search-and-filter__panelaria-hidden attribute from true to false
.p-search-and-filter__search-containeraria-expanded attribute from false to true
When you type in the search input the behaviour should be that the available selections are filtered to match the input. Also, a raw string input should be made available.
To import just this component into your project, copy the snippet below and include it in your main Sass file.
// import Vanilla and include base mixins // this only needs to happen once in a given project @import 'vanilla-framework'; @include vf-base; @include vf-p-chip; @include vf-p-search-box; @include vf-p-search-and-filter; @include vf-u-off-screen;
For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.
You can use search and filter in React by installing our react-component library and importing