Updated: February 8, 2022

Filter Form Cell

FUIFilterFormCell

Intro

A 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 a list picker control for easier interaction.

Button form cell on iPhone (left) and on iPad (right)
Button form cell on iPhone (left) and on iPad (right)

Anatomy

A filter form cell includes:

A. Category name
Describes the data range or function.

B. Buttons
Show a default and highlighted state to show a selection.

Filter form cell anatomy
Filter form cell anatomy

Behavior and Interaction

To select a value, the user taps on a button, which 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.

Unselected (left) and selected (right)
Unselected (left) and selected (right)

Adaptive Design

A filter form cell is supported in both compact and regular widths.

On iPad, filter form cells may be displayed inside a popover modal.

Filter form cell adaptivity
Filter form cell adaptivity

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.

Single selection (left) and multi-selection (right)
Single selection (left) and multi-selection (right)

Resources

Development: FUIFilterFormCell

SAP Fiori for Android: Filter Chips