When to use

• Large datasets – When users need to refine a long list of results (e.g., product catalogs, tables).

• Search refinement – When filtering is used alongside search to improve accuracy.

• Customizing views – When users want to adjust displayed content based on preferences (e.g., filtering by category, date, or status).

Best practices

• Keep filters visible – Place filters in a logical, easy-to-reach location.

• Use multi-select options when needed – Allow users to apply multiple filters simultaneously.

• Provide clear feedback – Show active filters and allow users to reset selections easily.

<label>
  <input type="checkbox" checked> In Stock
</label>
<label>
  <input type="checkbox"> On Sale
</label>

Well-implemented filters speed up navigation and improve user experience by making large sets of information easier to manage.