Updated: November 8, 2023

Rating Control

FUIRatingControl

Intro

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

Rating controls in compact width (left) and regular width (right)
Rating controls in compact width (left) and regular width (right)

Behavior and Interaction

When the user is able to set a rating, the larger interactive type of the rating control should be used. Users can either tap the stars individually or tap and slide their finger horizontally along the stars to choose the desired rating.

The small display type can be used in the filter form cell buttons for when the user is able to filter products or objects by rating.

Different uses of rating controls
Different uses of rating controls

Variations

Display

Shows the rating in a small read-only format. It is designed to be used with other components such as the data tablefilter form cell, or object cell.

Interactive

This is a larger tappable variation that enables the user to set the rating of an object. It can be used in table view cells or in a create form when the user is giving a rating for an object.

Interactive rating control (left) and display-only rating control (right)
Interactive rating control (left) and display-only rating control (right)

Resources

Development: FUIRatingControl

Related Components/Patterns: Create, FilterModalsObject Cell