Updated: January 26, 2022

Segmented Control Form Cell

FUISegmentedControlFormCell

Intro

A segmented control form cell allows the user to quickly select from a small set of values. It is typically used in the create and edit pattern, or occasionally in the filter pattern. If the value label is too long, it is recommended to use a list picker instead.

iPhone (left) and iPad modal (right)
iPhone (left) and iPad modal (right)

Usage

Do

Use a segmented control form cell when the value texts are short and concise.

Don't

Do not use a segmented control form cell if the values are long and need to be truncated. Use a list picker instead.

Anatomy

A. Label

Describes the intent of the selection.

B. Buttons

Have a selected state and an unselected state, allowing users to make a selection by tapping on them. It is highly recommended to have a default selection as it indicates to the user that the buttons are tappable.

 

Segmented control form cell anatomy
Segmented control form cell anatomy

Adaptive Design

In regular width, the segmented control form cell is displayed in a form sheet, popover or full screen modal.

Segmented control form cell in form sheet modal
Segmented control form cell in form sheet modal

Variations

Two-Row

If the label or the values are long, use the two-row variation to display content properly.

Segmented control form cell two-row variation
Segmented control form cell two-row variation

Resources

Related Components/Patterns: Segmented Control

Development: FUISegmentedControlFormCell

SAP Fiori for Android: Filter Chips