Filter

Anatomy

• Companies

  is any ofOperate
• Companies

  is any of2 companies

• Match all filters
• Clear

Chip

Core form without functionality.

Companies

is any ofOperate

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

is any of2 companies

Companies

is any of3 companies

Companies

is any of4 companies

Truncation

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

An extremely unnecessarily long label

is any ofTHIS IS THE COMPANY WITH THE LONGEST NAME SO FAR INCORPORATED AT THE REGISTRY OF COMPANIES IN ENGLAND AND WALES AND ENCOMPASSING THE REGISTRIES BASED IN SCOTLAN

Empty State

Empty Operator

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

Companies

Operate

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

is any of

Composing with Select and Choice

In this example we tie it all together by composing:

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

Companies

Operate