Updated: October 14, 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.

Compact width filter form cell on iPhone (left), regular-readable width on iPad (right)
Compact width filter form cell on iPhone (left), regular-readable width on iPad (right)

Anatomy

A filter form cell includes:

A. Label
Describes the filtering or sorting category.

B. Filter buttons
Displays filtering or sorting options.

Filter form cell anatomy
Filter form cell anatomy

Behavior and Interaction

To select a value, the user taps on a filter button, which becomes highlighted and displays a blue checkmark 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.

Filter form cell may be single selection or multi-selection. Depending on the use case, display a selected button by default or display all unselected buttons.

Unselected filter buttons (left) and selected (right)
Unselected filter buttons (left) and selected (right)

Adaptive Design

Filter form cell is supported in both compact and regular widths.

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

Compact width filter form cell in iPad popover modal
Compact width filter form cell in iPad popover modal

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