Reporting pages help users analyze and explore data. These pages often start with a set of filters at the top of the page that allow users to narrow down the results based on specific criteria. Consistent filter layout and behavior across reports improves usability and reduces cognitive load.
This guideline covers how to apply layout and interaction patterns when designing filters for reporting interfaces.

General Rules

• Keep filters visually consistent across all reporting pages.
• Use the default layout for input elements, not the inline version.
• Components should have a default width of 260px
  • This may be adjusted depending on the context
• Do not use unnecessarily wide inputs
  • e.g. 400px wide for a simple Date Range picker
• When a report can be generated without requiring filter input, use placeholder text (e.g. "Select one or more options") instead of setting default values.

Apply Button Best Practices

Use an Apply button when:

• Filters trigger complex or time-consuming operations.
• Multiple filter values should be set before the data refreshes.

Do not use an Apply button when:

• Each filter can update the results independently and with low latency.
• Users expect immediate feedback from filter interactions.
• Only a single, simple filter is used (e.g., a date range picker).

If using an Apply button:

• Position it at the end of the filter section.
• Keep it disabled until all required fields are filled.