<h2>Layout</h2>
<p>Consider your product, its data, and your users when choosing a layout. All layouts should have a visual logic. The following are examples of how filters may look and function. Adjust your designs according to best practices (see <a href="/patterns/filter/#articles">articles</a>) for your experience.</p>
<h3>Alignment</h3>
<h4>Vertical</h4>
<p>Vertical filters feature <a href="/components/accordion/">accordions</a> that can expand to show filtering options. The accordion contains additional components that determine the filter’s selection method, such as <a href="/components/radio-button/">radio buttons</a>, <a href="/components/checkbox/">checkboxes</a>, or <a href="/components/dropdown/">dropdowns</a>.</p>
<details data-name='image-block' data-images='[{"alt":"An example of vertical filters in accordions showing applied filters: 64 GB RAM, 32 GB RAM, and 2 TB storage or more.","caption":"Vertical filters are aligned to the left side of a page.","url":"https://dds.dell.com/site/v2/stage/45/ab/Filter_Layout_Alignment_Vertical_35d263d9d0.png"}]' data-numberofcolumns='1'></details>

<h4>Horizontal</h4>
<p>Horizontal filters feature <a href="/components/dropdown/">dropdowns</a> that open to show filtering options. The dropdown contains additional components that determine the filter’s selection method, such as <a href="/components/radio-button/">radio buttons</a>, <a href="/components/checkbox/">checkboxes</a>, or <a href="/components/dropdown/">dropdowns</a>.</p>
<details data-name='image-block' data-images='[{"alt":"An example of horizontal filters in dropdowns showing applied filters: Fixed rate (service type), South Bend, IN (location), and Pending activation (status).","caption":"Horizontal filters are aligned to the top of a page.","url":"https://dds.dell.com/site/v2/stage/b6/e5/Filter_Layout_Alignment_Horizontal_8cba9353e0.png"}]' data-numberofcolumns='1'></details>

<h2>Responsive</h2>
<p>For mobile and smaller screens, use vertical filters. Present filtering options large enough so they are easily viewed and applied. As an example, use either a <a href="/components/modal/">modal</a> or <a href="/components/drawer/">drawer</a> with <a href="/components/accordion/">accordions</a> to expose filtering with multiple options. In these instances, the component containing the filters should include a close button so users can return to the page content and view results.</p>
<details data-name='image-block' data-images='[{"alt":"An example of filters in a drawer showing applied filters: 64 GB RAM, 32 GB RAM, and 2 TB storage or more.","caption":"Responsive designs are particularly important consideration for e-commerce experiences as consumers frequently shop from their phones.","url":"https://dds.dell.com/site/v2/production/73/66/Filter_Responsive_105d6029f4.png"}]' data-numberofcolumns='1'></details>

<h2>Selection methods</h2>
<p>Choose the filter that makes sense for both the user and the data presented. You can study the individual component pages to understand their kinds, usage, and behavior.</p>
<table>
<thead>
<tr>
<th>Kind</th>
<th>Component</th>
</tr>
</thead>
<tbody><tr>
<td>Single-select</td>
<td><a href="/components/dropdown/">Dropdown</a>, <a href="/components/select/">Select</a>, <a href="/components/button/">Button</a>, <a href="/components/radio-button/">Radio button</a>, <a href="/components/tabs">Tab</a></td>
</tr>
<tr>
<td>Multi-select</td>
<td><a href="/components/dropdown/">Dropdown</a>, <a href="/components/checkbox/">Checkbox</a></td>
</tr>
<tr>
<td>Search</td>
<td><a href="/components/text-input/">Text input</a></td>
</tr>
</tbody></table>
<h2>Filter behavior</h2>
<h3>Batch filtering</h3>
<p>Batch results are typical for multi-select filters and experiences wherein users want to set complex or unfamiliar filter parameters. Batch filtering requires additional interaction, such as a <a href="/components/button/">button</a> with an “Apply” label, to update and display relevant results.</p>
<p>This filtering behavior can help prevent user frustration in applications that are slow to return the data specified by filter parameters, and also gives users time to think about their selections. Batch filtering is a reliable choice if you’re unsure which filter behavior to choose to best fit your experience.</p>
<details data-name='image-block' data-images='[{"alt":"A before and after example where filters for 64 GB and 32 GB storage are applied.","caption":"Batch filters only display results after the “Apply” button is pressed.","url":"https://dds.dell.com/site/v2/stage/cf/d8/Filter_Batch_Filtering_3228890c48.png"}]' data-numberofcolumns='1'></details>

<h3>Dynamic filtering</h3>
<p>Dynamic filtering displays results instantaneously. As soon as a user selects a value, the data updates and displays the parameters set by the user. Because the data updates automatically, you do not need to include additional interactions to process the data, such as a button with an “Apply” label. Because dynamically updating results can distract users, consider this approach carefully before implementing it in your experience.</p>
<details data-name='image-block' data-images='[{"alt":"A before and after example where a single-select filter for colocation and multi-select filters for hybrid cloud and private are applied.","caption":"Dynamic filtering can be used for single-select filters, and is recommended only when a small number of filters are available.","url":"https://dds.dell.com/site/v2/stage/46/75/Filter_Dynamic_Filtering_d33e56a071.png"}]' data-numberofcolumns='1'></details>

<h2>Usage</h2>
<p>Best practices for using filters are context-specific and differ depending on the product or application. Generally, keep filter controls in close proximity to filterable data. Additionally, all filter options should be selected or unselected when a user first encounters them. To determine which, consider whether your user would prefer to see a full data set and exclude specific elements, or if they would like to start with nothing and include specific elements. Always include a way for users to clear all filters.</p>
<h3>E-commerce applications</h3>
<p>E-commerce experiences are ones that present consumers with products and encourage them to make a purchase. Filters are used to reduce the available options to ones that fit an individual’s needs. It’s important to strike a balance between too few and too many filter options, so consider what characteristics a user might use to make a decision. Group options within concise category labels.</p>
<h3>Productivity applications</h3>
<p>Productivity applications, including dashboards and analytics products, often include ranges and more complicated filtering options. These applications are frequently used in the business-to-business (B2B) applications. Users in this context tend to appreciate more information on their screens, and train themselves to find the data they need to complete their tasks.</p>
<h2>Accessibility</h2>
<p>Follow the respective accessibility guidelines for the components used to create the filter. For example, if a filtering experience includes radio buttons, follow the <a href="/components/radio-button/?tab=Design#standards">accessibility guidelines for radio buttons</a>.</p>
<h2>Standards</h2>
<h3>Content</h3>
<p><strong>Capitalization</strong><br>Use sentence case in filter layouts for readability.<br><strong>Do</strong>: Storage size<br><strong>Don’t</strong>: Storage Size
<br></br>
<strong>Options</strong><br>Try to limit the number of categories and their options. Well-designed filters help users feel in control, and are not overwhelming in presentation. Also, consider the order of options from your user’s perspective. For example, display quantitative amounts in ascending or descending order.
<br></br>
<strong>Punctuation</strong><br>Content within filters do not require punctuation. Note that colons (:) do not scale well.
<br></br>
<strong>Interaction</strong><br>Avoid ambiguous copy such as “Filter results” on interactive items like buttons or links.<br><strong>Do</strong>: Apply<br><strong>Don’t</strong>: Filter Results
<br></br>
<strong>Common copy for filter interactions</strong><br>Clear all<br>Select all<br>Apply</p>
<h2>Articles</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/filter-categories-values/","type":"External"},"title":"Helpful filter categories","description":"Read the Nielsen Norman Group&#39;s article on filter categories.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/applying-filters/","type":"External"},"title":"User Intent Affects Filter Design","description":"Read the Nielsen Norman Group&#39;s guidance about filters.","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1'></details>

figma

Figma UI Kit

Filters are used to set parameters on datasets. They help users refine results to find relevant content.