> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Filters

> Give users the power to shape their view of data through simple controls that reveal only what matters to their current task.

<div className="w-full max-w-[640px] h-full max-h-[360px] bg-[#FFFFFF]rounded flex items-center justify-center">
  <img src="https://mintcdn.com/servicetitan/W7bRS4vt6CVw_gro/images/docs/web/patterns/filters/overview-image.png?fit=max&auto=format&n=W7bRS4vt6CVw_gro&q=85&s=c1181375ffc4e5586d8ab1ad6cf13e64" alt="Overview preview of Filters" width="640" height="360" data-path="images/docs/web/patterns/filters/overview-image.png" />
</div>

## Getting Started

Filters are primarily built off the [Filter Bar](/docs/web/components/filter-bar/design) component. Refer to its documentation for design and implementation guidance.

| Component                                                       | When to Use                                                                                                                                                       |
| --------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **[Filter Bar](/docs/web/components/filter-bar/design)**        | Use for most filtering needs—when displaying filters in a toolbar above lists or tables of data. Handles text, selects, date pickers, and more.                   |
| **[Segmented Control](/docs/web/components/segmented-control)** | Use when users are choosing between a small, fixed set of filter options (e.g., switching between 2–4 views). Great for toggling or simple categorical selection. |

## Principles

### Smart, Insightful

The default filter behavior should be aligned with user preferences and common use cases. If a specific filter option is used by 80% of users, make that the default. Users will still have the flexibility to adjust, but the system nudges them towards efficient choices.

### Intuitive, Efficient, Automatic

* Most usable filters should always be placed first to ensure quick access, reduce user effort, and improve efficiency in finding relevant results.
* When filter patterns are consistent, users can easily locate the information they need and perform tasks with greater efficiency.
* Users don't need to re-learn how to use filters repeatedly. If they know where to locate filters in one section of the application, they can quickly and conveniently locate them in other areas of the product.
* The usability of filter patterns is crucial for creating a positive user experience and increasing user engagement and satisfaction. Therefore, ST layout options, responsiveness, and page hierarchies (headers, action bars, etc.) should be considered when making a decision.

### Trustworthy

Filters should be accessible to all users. Using provided components gives us a consistent baseline of accessibility.