Updated: January 22, 2019

Filter Form Cell

Intro

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.

Usage

Do
  • Use a filter form cell when the number of values is less than 8.
Don't
  • Don’t use a filter form cell if the text is too long. 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.

Types

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.

Regular Width

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

Resources