{"componentChunkName":"component---src-pages-patterns-filtering-index-mdx","path":"/patterns/filtering/","webpackCompilationHash":"9a5cb62a61994334ab3f","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Filtering","description":"Filtering is the mechanism by which a user adds or removes data items from a displayed data set by turning on and off certain predefined attributes."},"relativePagePath":"/patterns/filtering/index.mdx","titleType":"prepend","MdxNode":{"id":"5f08966b-b389-526b-990b-413b7a3d3ff1","children":[],"parent":"6eab684f-9842-57a4-a1e3-aec1ce5bf508","internal":{"content":"---\ntitle: Filtering\ndescription: Filtering is the mechanism by which a user adds or removes data items from a displayed data set by turning on and off certain predefined attributes.\n---\n\n### _Filtering_ is the mechanism by which a user adds or removes data items from a displayed data set by turning on and off certain predefined attributes.\n\n\n\nSelecting filters\nTriggering filters\nFilter interaction\n\n\n\n## Selecting filters\n\n### Single selection\n\nA _single-selection filter_ is employed when the user can pick **only one attribute** from a category to modify the data results. Under the hood, single selection behaves like a radio button. Ways in which a single selection filter can manifest include:\n\n- Basic dropdown\n- Inline dropdown\n- Search\n- Radio button set (either standalone or within a menu)\n\n\n\n\n\n\n\n\n\n
\n\n### Multi-selection\n\nA _multi-selection filter_ is employed when the user has the option to pick **more than one attribute** from a category to modify the data results. Under the hood, multi-selections behave like _checkboxes_. Ways in which a single selection filter can manifest include:\n\n- Multi-select dropdown\n- Inline multi-select dropdown\n- Search with tags\n- Checkbox set (either standalone or within a menu)\n\n\n\n\n\n\n\n\n\n
\n\n### Multiple categories\n\nA _category_ is a set of filter items within the same topic. For example, \"size\" is the category and `small`, `medium`, `large`, and `extra large` are the filter choices. Multiple filter categories may be applied to the same data set. For example, the user can filter by size as well as color and price range.\n\nMultiple category selection is most commonly manifested in either a vertical list on the left side of the page or within a horizontal drawer at the top of the data set. Multiple categories should never be put within a menu or dropdown.\n\n\n\n\n\n\n\n\n\n
\n\n## Triggering filters\n\n### Batch filter\n\nA _batch filter_ is employed when all filters are applied together at the end of the selection process. The data set only refreshes once. The trigger is most commonly an \"Apply filter\" button.\n\nThe batch filter works best when the user is making several filtering selections across different categories that may take a longer time to mentally process. Batch filtering is also a good solution for slow data-return speeds. This can prevent the user from having to wait for the data to load after every selection.\n\n\n\n\n\n\n\n\n\n
\n\n### Interactive filter\n\nAn _interactive filter_ returns results after each individual selection is made. The trigger is the individual selection and the filter manipulates the data in real time. This is a good solution for when the user is only selecting from one category or the user is expected to only make one filter selection.\n\n## Filter interaction\n\nEach filter interaction should contain the following patterns and states:\n\n- Default start state\n- Unselected and selected state\n- Filter applied state\n- Clear filter(s) action\n\n### Starting states\n\nFilters within each category should start either as _all unselected_ or _all selected_. When using multiple categories, the start state can vary from category to category. If the user wants only one or a few criteria to be excluded from the results, then all filters should be selected at the start. Vice-versa, if the user wants to see only results related to one particular criteria, then all filters should start as unselected.\n\n### Filter applied\n\nIf the filter(s) can be hidden in either a drawer, dropdown, or menu, then there should be an indicator visible on the closed filter state that informs the user that filters have been applied. At a minimum, the indicator should include the number of filters applied and have the option to clear filters without re-opening the filter container.\n\n\n\n\n\n\n\n\n\n
\n\n\n\n\n\n\n\n\n\n
\n### Resetting filters\n\nEach category should have a way to clear all applied filters at once without having to interact with each individual item. Clearing filters returns the filters to their original default starting state.\n\nIf multiple categories have been applied to the same data set then there should be a way to dismiss all filters across all categories at once.\n\n\n\n\n\n\n\n\n\n
\n","type":"Mdx","contentDigest":"e707a4ad7e9c2d2967be2cebffccbfb4","counter":1296,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Filtering","description":"Filtering is the mechanism by which a user adds or removes data items from a displayed data set by turning on and off certain predefined attributes."},"exports":{},"rawBody":"---\ntitle: Filtering\ndescription: Filtering is the mechanism by which a user adds or removes data items from a displayed data set by turning on and off certain predefined attributes.\n---\n\n### _Filtering_ is the mechanism by which a user adds or removes data items from a displayed data set by turning on and off certain predefined attributes.\n\n\n\nSelecting filters\nTriggering filters\nFilter interaction\n\n\n\n## Selecting filters\n\n### Single selection\n\nA _single-selection filter_ is employed when the user can pick **only one attribute** from a category to modify the data results. Under the hood, single selection behaves like a radio button. Ways in which a single selection filter can manifest include:\n\n- Basic dropdown\n- Inline dropdown\n- Search\n- Radio button set (either standalone or within a menu)\n\n\n\n\n\n\n\n\n\n
\n\n### Multi-selection\n\nA _multi-selection filter_ is employed when the user has the option to pick **more than one attribute** from a category to modify the data results. Under the hood, multi-selections behave like _checkboxes_. Ways in which a single selection filter can manifest include:\n\n- Multi-select dropdown\n- Inline multi-select dropdown\n- Search with tags\n- Checkbox set (either standalone or within a menu)\n\n\n\n\n\n\n\n\n\n
\n\n### Multiple categories\n\nA _category_ is a set of filter items within the same topic. For example, \"size\" is the category and `small`, `medium`, `large`, and `extra large` are the filter choices. Multiple filter categories may be applied to the same data set. For example, the user can filter by size as well as color and price range.\n\nMultiple category selection is most commonly manifested in either a vertical list on the left side of the page or within a horizontal drawer at the top of the data set. Multiple categories should never be put within a menu or dropdown.\n\n\n\n\n\n\n\n\n\n
\n\n## Triggering filters\n\n### Batch filter\n\nA _batch filter_ is employed when all filters are applied together at the end of the selection process. The data set only refreshes once. The trigger is most commonly an \"Apply filter\" button.\n\nThe batch filter works best when the user is making several filtering selections across different categories that may take a longer time to mentally process. Batch filtering is also a good solution for slow data-return speeds. This can prevent the user from having to wait for the data to load after every selection.\n\n\n\n\n\n\n\n\n\n
\n\n### Interactive filter\n\nAn _interactive filter_ returns results after each individual selection is made. The trigger is the individual selection and the filter manipulates the data in real time. This is a good solution for when the user is only selecting from one category or the user is expected to only make one filter selection.\n\n## Filter interaction\n\nEach filter interaction should contain the following patterns and states:\n\n- Default start state\n- Unselected and selected state\n- Filter applied state\n- Clear filter(s) action\n\n### Starting states\n\nFilters within each category should start either as _all unselected_ or _all selected_. When using multiple categories, the start state can vary from category to category. If the user wants only one or a few criteria to be excluded from the results, then all filters should be selected at the start. Vice-versa, if the user wants to see only results related to one particular criteria, then all filters should start as unselected.\n\n### Filter applied\n\nIf the filter(s) can be hidden in either a drawer, dropdown, or menu, then there should be an indicator visible on the closed filter state that informs the user that filters have been applied. At a minimum, the indicator should include the number of filters applied and have the option to clear filters without re-opening the filter container.\n\n\n\n\n\n\n\n\n\n
\n\n\n\n\n\n\n\n\n\n
\n### Resetting filters\n\nEach category should have a way to clear all applied filters at once without having to interact with each individual item. Clearing filters returns the filters to their original default starting state.\n\nIf multiple categories have been applied to the same data set then there should be a way to dismiss all filters across all categories at once.\n\n\n\n\n\n\n\n\n\n
\n","fileAbsolutePath":"/tmp/35443907/src/pages/patterns/filtering/index.mdx"}}}}