A. Leading Text (Optional)

The leading text for read-only states describes the average rating value.

B. Rating Controls

The rating controls display the rating of an object.

C. Trailing Text (Optional)

The trailing text describes the average rating value or indicates the total number of ratings.

Rating control anatomy

When users are enabled to set a rating, the larger interactive type of the rating control should be used. Users can either tap the stars individually or tap or slide their finger horizontally along the stars to select their desired rating.

The small display type can be used in filter form cell buttons to allow users to filter products or objects by rating.

Different uses of rating controls

In an editable or disabled rating control, only full or empty stars can be used. However, in read-only states with multiple ratings, half stars can be displayed. For example, on a scale of 0 to 5, a rating less than 0.75 shows as a half star; a rating from 0.75 to 1.25 shows as a full star; and a rating from 1.25 to 1.75 shows as a full star plus a half star, etc.

Rules of showing a full star and a half star

The read-only variation displays the rating in a large or small read-only format. The flexible sizing is designed to be used with other components such as the data table

filter form cell

or object cell. Additionally, there is an option for accented read-only rating controls to show semantic colors instead of the default color.

Large read-only rating control (top) and small accented read-only rating control (bottom)

The interactive variation is a larger tappable variant of the editable rating control 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. When the field is not accessible to the user, the editable state can be set as a disabled state.

Editable rating control (top) and disabled rating control (bottom)