Search and filter
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
You will have to handle the overflowing chip count yourself. Unfortunately that is out of scope for this example but this can be handled for you by the React component.
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.
You will have to handle filtering the available chips yourself by removing or hiding chips that do not match. Unfortunately that is out of scope for this example but this can be handled for you by the React component.
To import just this component into your project, copy the snippet below and include it in your main Sass file.
@import '../base'; @include vf-base; @import '../patterns_chip'; @import '../patterns_search-box'; @import '../patterns_search-and-filter'; @import '../utilities_off-screen'; @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.
For use of the React component you can do that by installing our react-component page and importing.
No design specs available yet.