{"componentChunkName":"component---src-pages-patterns-filtering-index-mdx","path":"/patterns/filtering/","result":{"pageContext":{"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":"7ac849fb-6170-5eee-ad2b-589a2d5f9372","children":[],"parent":"58705400-f3f7-55cb-b809-08d1732352d8","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<PageDescription>\n\nFiltering allows a user to add or remove data items from a displayed data set by turning on and off certain predefined attributes.\n\n</PageDescription>\n\n<AnchorLinks>\n\n<AnchorLink>Overview</AnchorLink>\n<AnchorLink>Selection methods</AnchorLink>\n<AnchorLink>Filter states</AnchorLink>\n<AnchorLink>Resetting filters</AnchorLink>\n<AnchorLink>Related</AnchorLink>\n<AnchorLink>References</AnchorLink>\n<AnchorLink>Feedback</AnchorLink>\n\n</AnchorLinks>\n\n## Overview\n\nFiltering allows users to trim down visible items when working through large data sets. Filters can help a user find something they're looking for, see available options within a certain set of criteria, and make a decision when faced with a large number of options.\n\n## Selection methods\n\nChoosing the right filter selection method will improve usability and user effiency. Carbon supports several selection methods that are approrpriate for different situations. Consider the data your users are looking at, what they are trying to achieve, and how they might intuitively narrow down the data.\n\n| Selection method                        | Description                                                                                 |\n| --------------------------------------- | ------------------------------------------------------------------------------------------- |\n| _Single selection_                      | The user can pick only one attribute to modify data results.                                |\n| _Multi-selection_                       | The user has the option to pick more than one attribute to modify data results.             |\n| _Multiple categories_                   | The user has the option to select attributes across multiple data categories.               |\n| _Multiple filters with batch updates_   | The user selects multiple filters and then takes an additional action to apply the filters. |\n| _Multiple filters with instant updates_ | The data is updated as the user selects each filter.                                        |\n\n### Single selection\n\nUse a single-selection filter when the user can pick only one attribute to modify data results. Under the hood, single selection behaves like a [radio button](/components/radio-button/usage). Types of single-selection filters include:\n\n- Basic dropdown\n- Inline dropdown\n- Radio button set (either standalone or within a menu)\n\n<Row>\n<Column colLg={8}>\n\n![Example of a single selection filter in an inline dropdown](images/filter-1.png)\n\n<Caption>Example of a single selection filter in an inline dropdown</Caption>\n\n</Column>\n</Row>\n\n### Multi-selection\n\nUse a multi-selection filter when the user has the option to pick more than one attribute to modify the data results. Under the hood, multi-selections behave like [checkboxes](components/checkbox/usage). Types of multi-selection filters include:\n\n- Multi-select dropdown\n- Inline multi-select dropdown\n- Checkbox set (either standalone or within a menu)\n\n<Row>\n<Column colLg={8}>\n\n![Example of a milti-selection filter in a checkbox set](images/filter-2.png)\n\n<Caption>Example of a multi-selection filter in a checkbox set</Caption>\n\n</Column>\n</Row>\n\n### Selecting multiple categories\n\nA category is a set of filter items within the same topic. For example, \"size\" is a category and `small`, `medium`, `large`, and `extra large` are its filter choices. Multiple filter categories may be applied to the same data set. For example, the user can filter by size, color, and price range.\n\nMultiple category selection is usually placed vertically on the left side of the page or horizontally at the top of the data set. Multiple categories should never be put within a menu or dropdown.\n\n<Row>\n<Column colLg={8}>\n\n![Example of multiple filter categories](images/filter-3.png)\n\n<Caption>Example of multiple filter categories</Caption>\n\n</Column>\n</Row>\n\n### Multiple filters with batch updates\n\nUse a batch filter when all filters are applied together at the end of the selection process. The data set only refreshes once at user action. The trigger is most commonly an \"Apply filters\" 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<Row>\n<Column colLg={8}>\n\n![Example of batch filtering](images/filter-4.png)\n\n<Caption>Example of batch filtering</Caption>\n\n</Column>\n</Row>\n\n### Multiple filters with instant updates\n\nThis method 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 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 typically wants only one or a few criteria to be excluded from the results, then all filters should be selected at the start. If the user typically wants to see only results related to one particular criteria, then all filters should start as unselected.\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<Row>\n<Column colLg={6}>\n\n![Example of hidden filters not applied](images/filter-5.png)\n\n<Caption>Example of filter without selections</Caption>\n\n</Column>\n\n<Column colLg={6}>\n\n![Example of hidden filters applied](images/filter-6.png)\n\n<Caption>Example of filter with selections</Caption>\n\n</Column>\n</Row>\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 also be a way to dismiss all filters across all categories at once.\n\n<Row>\n<Column colLg={8}>\n\n![Filter reset example](images/filter-7.png)\n\n<Caption></Caption>\n\n</Column>\n</Row>\n\n## Related\n\n<Row>\n<Column colSm={2} colMd={2} colLg={4}>\n\n#### Components\n\n- [Radio button](/components/radio-button/usage)\n- [Dropdown](/components/dropdown/usage)\n- [Checkbox](/components/checkbox/usage)\n- [Data table](/components/data-table/usage)\n\n</Column>\n<Column colSm={2} colMd={2} colLg={4}>\n\n#### Patterns\n\n- [Clear](/patterns/common-actions#clear)\n- [Notifications](/patterns/notification-pattern)\n- [Search](patterns/search-pattern)\n\n</Column>\n</Row>\n\n## References\n\n- Patternfly, [Filters](https://www.patternfly.org/v4/design-guidelines/usage-and-behavior/filters) (2019)\n- Nick Babich, [Best Practices for Search Results](https://uxplanet.org/best-practices-for-search-results-1bbed9d7a311) (2017)\n- Think with Google, [In-App Search](https://www.thinkwithgoogle.com/marketing-resources/experience-design/chapter-2-in-app-search/) (2016)\n\n## Feedback\n\nHelp us improve this pattern by providing feedback, asking questions, and leaving any other comments [on GitHub](https://github.com/carbon-design-system/carbon-website/issues/new?assignees=&labels=feedback&template=feedback.md).\n","type":"Mdx","contentDigest":"df57e746fd2112d9224d148df1daaea0","counter":1679,"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<PageDescription>\n\nFiltering allows a user to add or remove data items from a displayed data set by turning on and off certain predefined attributes.\n\n</PageDescription>\n\n<AnchorLinks>\n\n<AnchorLink>Overview</AnchorLink>\n<AnchorLink>Selection methods</AnchorLink>\n<AnchorLink>Filter states</AnchorLink>\n<AnchorLink>Resetting filters</AnchorLink>\n<AnchorLink>Related</AnchorLink>\n<AnchorLink>References</AnchorLink>\n<AnchorLink>Feedback</AnchorLink>\n\n</AnchorLinks>\n\n## Overview\n\nFiltering allows users to trim down visible items when working through large data sets. Filters can help a user find something they're looking for, see available options within a certain set of criteria, and make a decision when faced with a large number of options.\n\n## Selection methods\n\nChoosing the right filter selection method will improve usability and user effiency. Carbon supports several selection methods that are approrpriate for different situations. Consider the data your users are looking at, what they are trying to achieve, and how they might intuitively narrow down the data.\n\n| Selection method                        | Description                                                                                 |\n| --------------------------------------- | ------------------------------------------------------------------------------------------- |\n| _Single selection_                      | The user can pick only one attribute to modify data results.                                |\n| _Multi-selection_                       | The user has the option to pick more than one attribute to modify data results.             |\n| _Multiple categories_                   | The user has the option to select attributes across multiple data categories.               |\n| _Multiple filters with batch updates_   | The user selects multiple filters and then takes an additional action to apply the filters. |\n| _Multiple filters with instant updates_ | The data is updated as the user selects each filter.                                        |\n\n### Single selection\n\nUse a single-selection filter when the user can pick only one attribute to modify data results. Under the hood, single selection behaves like a [radio button](/components/radio-button/usage). Types of single-selection filters include:\n\n- Basic dropdown\n- Inline dropdown\n- Radio button set (either standalone or within a menu)\n\n<Row>\n<Column colLg={8}>\n\n![Example of a single selection filter in an inline dropdown](images/filter-1.png)\n\n<Caption>Example of a single selection filter in an inline dropdown</Caption>\n\n</Column>\n</Row>\n\n### Multi-selection\n\nUse a multi-selection filter when the user has the option to pick more than one attribute to modify the data results. Under the hood, multi-selections behave like [checkboxes](components/checkbox/usage). Types of multi-selection filters include:\n\n- Multi-select dropdown\n- Inline multi-select dropdown\n- Checkbox set (either standalone or within a menu)\n\n<Row>\n<Column colLg={8}>\n\n![Example of a milti-selection filter in a checkbox set](images/filter-2.png)\n\n<Caption>Example of a multi-selection filter in a checkbox set</Caption>\n\n</Column>\n</Row>\n\n### Selecting multiple categories\n\nA category is a set of filter items within the same topic. For example, \"size\" is a category and `small`, `medium`, `large`, and `extra large` are its filter choices. Multiple filter categories may be applied to the same data set. For example, the user can filter by size, color, and price range.\n\nMultiple category selection is usually placed vertically on the left side of the page or horizontally at the top of the data set. Multiple categories should never be put within a menu or dropdown.\n\n<Row>\n<Column colLg={8}>\n\n![Example of multiple filter categories](images/filter-3.png)\n\n<Caption>Example of multiple filter categories</Caption>\n\n</Column>\n</Row>\n\n### Multiple filters with batch updates\n\nUse a batch filter when all filters are applied together at the end of the selection process. The data set only refreshes once at user action. The trigger is most commonly an \"Apply filters\" 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<Row>\n<Column colLg={8}>\n\n![Example of batch filtering](images/filter-4.png)\n\n<Caption>Example of batch filtering</Caption>\n\n</Column>\n</Row>\n\n### Multiple filters with instant updates\n\nThis method 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 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 typically wants only one or a few criteria to be excluded from the results, then all filters should be selected at the start. If the user typically wants to see only results related to one particular criteria, then all filters should start as unselected.\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<Row>\n<Column colLg={6}>\n\n![Example of hidden filters not applied](images/filter-5.png)\n\n<Caption>Example of filter without selections</Caption>\n\n</Column>\n\n<Column colLg={6}>\n\n![Example of hidden filters applied](images/filter-6.png)\n\n<Caption>Example of filter with selections</Caption>\n\n</Column>\n</Row>\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 also be a way to dismiss all filters across all categories at once.\n\n<Row>\n<Column colLg={8}>\n\n![Filter reset example](images/filter-7.png)\n\n<Caption></Caption>\n\n</Column>\n</Row>\n\n## Related\n\n<Row>\n<Column colSm={2} colMd={2} colLg={4}>\n\n#### Components\n\n- [Radio button](/components/radio-button/usage)\n- [Dropdown](/components/dropdown/usage)\n- [Checkbox](/components/checkbox/usage)\n- [Data table](/components/data-table/usage)\n\n</Column>\n<Column colSm={2} colMd={2} colLg={4}>\n\n#### Patterns\n\n- [Clear](/patterns/common-actions#clear)\n- [Notifications](/patterns/notification-pattern)\n- [Search](patterns/search-pattern)\n\n</Column>\n</Row>\n\n## References\n\n- Patternfly, [Filters](https://www.patternfly.org/v4/design-guidelines/usage-and-behavior/filters) (2019)\n- Nick Babich, [Best Practices for Search Results](https://uxplanet.org/best-practices-for-search-results-1bbed9d7a311) (2017)\n- Think with Google, [In-App Search](https://www.thinkwithgoogle.com/marketing-resources/experience-design/chapter-2-in-app-search/) (2016)\n\n## Feedback\n\nHelp us improve this pattern by providing feedback, asking questions, and leaving any other comments [on GitHub](https://github.com/carbon-design-system/carbon-website/issues/new?assignees=&labels=feedback&template=feedback.md).\n","fileAbsolutePath":"/zeit/3f757860/src/pages/patterns/filtering/index.mdx"}}}}