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.
Compact width filter form cell on iPhone (left), regular full-width on iPad (right)
Usage
Do
Use a filter form cell for short text and if the number of values is less than eight.
Don't
Avoid using a filter form cell if the text is too long or if the number of values is more than eight. Use a list picker control for easier interaction.
Anatomy
A. Label
Describes the filtering or sorting category.
B. Filter Buttons
Displays filtering or sorting options.
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)
Adaptive Design
Filter form cells are 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
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)