Updated: November 26, 2020

Filter Form Cell

Intro

Filter Form Cell is used to filter one or more values under a filter category. It is commonly used in the filter pattern for sorting and grouping.

Avoid using a filter form cell if the text is too long or if the number of values is more than 8. Use the list picker control for easier interaction.

A filter form cell control is used to filter one or more values under a filter category. It is commonly used in the filter pattern for sorting and grouping.

Avoid using a filter form cell if the text is too long or if the number of values is more than 8. Use the list picker control for easier interaction.

Structure

A filter form cell includes:

A. Category name
To describe the data range or function.

B. Buttons
Buttons have a normal and highlighted state to show a selection.

Variations

Single Selection

Single selection is used to filter by one value under a category.

Multi-selection

Multi-selection is used to select multiple values within a category.

Behavior & Interaction

To select a value, the user taps on a button that becomes highlighted to indicate it as a selection.

In the case of multiple selection, the user can tap on additional buttons. To deselect a selected value, the user taps again on the selection.

Adaptivity

The Filter Form Cell component is supported in both compact and regular widths.

In regular width, filter form cells are displayed inside a popover modal.

Resources