FilterBar

Use the FilterBar to filter a set of data based on one or several criteria determined by the user. The component allows you to add various form elements as filter controls.

OverviewPropertiesUsage

When to use

The FilterBar is the primary means for users to filter content in your app.

• Use the FilterBar for simple filter statements.
• Use the FilterBar to allow users to quickly filter content using form components (for example, TextInputs or Selects).

Filter controls

Configure filter controls in the FilterBar to be pinned, optional, or pinned-optional.

Pinned

• Pinned filter controls are always visible, and users can't remove them.
• Use pinned for universal controls relevant to most users regardless of the task they want to perform. For example, use pinned for a keyword search.

Optional

• Optional filter controls are hidden by default. Users can enable them in the Add filters dropdown.
• Use optional controls for advanced filters or controls that may be complementary but not essential. Hiding them by default allows you to save space and avoids overwhelming users upfront.

Pinned-optional

• Pinned-optional filter controls are visible by default. Users can hide them in the Add filters dropdown.
• Use pinned-optional for controls where user needs might vary widely per task or persona, but provide a good set of default filters.

TimeframeSelector as filter control

When you use the TimeframeSelector as a filter control in the FilterBar, ensure it's pinned and, thus, always visible to the user.