{"id":741,"date":"2018-05-15T16:37:06","date_gmt":"2018-05-15T16:37:06","guid":{"rendered":"https:\/\/sites.neoninspire.com\/style-guide\/?page_id=741"},"modified":"2018-06-01T20:45:20","modified_gmt":"2018-06-01T20:45:20","slug":"usage","status":"publish","type":"page","link":"https:\/\/sites.neoninspire.com\/style-guide\/components\/filters\/usage\/","title":{"rendered":"Filters Usage"},"content":{"rendered":"<p>Components<\/p>\n<h1>\n\t\tFilters<br \/>\n\t<\/h1>\n<h4>\n\t\tFiltering is the action by which a user adds or removes data items from a shown data set by turning on and off certain predefined criteria.<br \/>\n\t<\/h4>\n<h2>\n\t\tSelecting filters<br \/>\n\t<\/h2>\n<h4>\n\t\t<a href=\"#\" title=\"Single selection\" target=\"_self\"><br \/>\n\t\tSingle selection<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>A single selection filter is when the user can pick\u00a0<strong>only one criteria<\/strong>\u00a0from a category to modify the data results. Under the hood, single selection is a radio button. Ways in which a single selection filter can manifest is in a\/an:<\/p>\n<ul>\n<li>Basic Dropdown<\/li>\n<li>Inline Dropdown<\/li>\n<li>Search<\/li>\n<li>Radio Button set (either stand alone or within a menu)<\/li>\n<\/ul>\n<h4>\n\t\t<a href=\"#\" title=\"Multiple selection\" target=\"_self\"><br \/>\n\t\tMultiple selection<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>A multi-selection filter is used when the user has the option to pick\u00a0<strong>more than one criteria<\/strong>\u00a0from a category to modify the data results. Under the hood, multi-selections are Checkboxes. Ways in which a single selection filter can manifest is in a\/an:<\/p>\n<ul>\n<li>Multi-select dropdown<\/li>\n<li>Inline multi-select dropdown<\/li>\n<li>Search with tags<\/li>\n<li>Checkbox set (either stand alone or within a menu)<\/li>\n<\/ul>\n<h2>\n\t\tInteracting with filters<br \/>\n\t<\/h2>\n<h4>\n\t\tEach filter interaction should contain the following patterns and states:<br \/>\n\t<\/h4>\n<ul>\n<li>Default start state<\/li>\n<li>Unselected &amp; selected state<\/li>\n<li>Filter applied state<\/li>\n<li>Clear filter(s) action<\/li>\n<\/ul>\n<h4>\n\t\t<a href=\"#\" title=\"Starting states\" target=\"_self\"><br \/>\n\t\tStarting states<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>Filters within each category should start either as all unselected or all selected. 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. Oppositely, if the user wants to see only results related to one particular criteria then all filters should start as unselected.<\/p>\n<h4>\n\t\t<a href=\"#\" title=\"Filter applied\" target=\"_self\"><br \/>\n\t\tFilter applied<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>If the filter(s) can be hidden in either a drawer, dropdown, or menu, then there should be a <a href=\"https:\/\/sites.neoninspire.com\/style-guide\/components\/pill\/\">pill<\/a> indicating each filter that is currently in use and a way to quickly remove it.<\/p>\n<h4>\n\t\t<a href=\"#\" title=\"Resetting filters\" target=\"_self\"><br \/>\n\t\tResetting filters<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>Each 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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Components Filters Filtering is the action by which a user adds or removes data items from a shown data set by turning on and off certain predefined criteria. Selecting filters Single selection A single selection filter is when the user can pick\u00a0only one criteria\u00a0from a category to modify the data results. Under the hood, single&hellip;<\/p>\n","protected":false},"author":32,"featured_media":0,"parent":43,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-741","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/741","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/comments?post=741"}],"version-history":[{"count":4,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/741\/revisions"}],"predecessor-version":[{"id":1170,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/741\/revisions\/1170"}],"up":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/43"}],"wp:attachment":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/media?parent=741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}