Updated: January 15, 2024

Rating Control Form Cell

FUIRatingControlFormCell

Intro

The rating control form cell is used to indicate an average rating for an object in a form cell. It also allows users to set their own rating on a numerical scale from 1 (lowest) to 5 (highest).

Rating control form cell in compact width (left) and regular width (right)
Rating control form cell in compact width (left) and regular width (right)

Anatomy

A. Label

The label describes the intent of the rating.

B. Rating Controls

The rating controls display the rating of an object.

Rating control form cell anatomy
Rating control form cell anatomy

Behavior and Interaction

Users can set a rating in a rating control form cell using the larger interactive type of rating control. They can either tap the stars individually or tap and slide their finger horizontally along the stars to choose the desired rating.

Tap to choose the desired rating
Tap to choose the desired rating
Drag to choose the desired rating
Drag to choose the desired rating

Adaptive Design

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

Regular width rating control form cell in an iPad modal
Regular width rating control form cell in an iPad modal

Variations

Display

Shows the rating in a small read-only format. See Rating Control for more details.

Interactive

This is a larger tappable variation that enables the user to set the rating of an object. See Rating Control for more details.

Interactive rating control form cell (left) and display rating control form cell (right)
Interactive rating control form cell (left) and display rating control form cell (right)

Resources

Development: FUIRatingControlFormCell

SAP Fiori for Web: Rating Indicator

Human Interface Guidelines: Rating Indicators

Related Components/Patterns: Rating Control