Filter

A row of chips presenting active filters, each pairing an operator with one or more values.

Installation

import { Filter } from "@o/pipeline/experimental/components/filter";

Anatomy

Chip

Core form without functionality.

Companies

Tip

All children of the Filter component require an explicit key for animation purposes. You can autogenerate one with the useKey hook from @o/pipeline/hooks/use-key.

Multiple values

When there is more than 1 value, the Filter.Value component should display a count of the values and, in most cases, omit the icon.

Companies
Companies
Companies

Truncation

The Filter.Value component truncates text when it overflows (e.g. on smaller viewports).

An extremely unnecessarily long label

Empty state

Empty operator

Ideally, Filter should never have an empty operator, but it can provide an empty state as a fallback.

Companies

Empty value

Ideally, Filter should be removed completely from the DOM when its value is empty, but it can provide an empty state as a fallback.

This will be rendered when the value is null, undefined, or an empty string.

Companies

Composing with Select and Choice

This example composes:

  1. A Select component for Filter.Operator
  2. A Choice component for Filter.Value
Companies