A. Leading Text (Display Only)

The counter or text supplements the rating of the display-only rating control variant. It can be used to display the number of ratings, the exact rating value, and more.

B. Icon

The icons represent the average object rating value through several states: on, off, and half. The states of these icons depict a rating from a scale of one to five. Half stars can be used for read-only state. The star icon is shown by default, and custom icons are supported to provide flexibility.

B. Trailing Text
The counter or text supplements the rating. It can be used to display the number of ratings, the exact rating value, and more. For an interactive rating control, the trailing text can be treated as optional if it is in a form cell or object cell container which conveys the value elsewhere.

While both leading text and trailing text are optional, it is recommended to use at least one label with the rating control component for accessibility.

Rating control anatomy

The read-only rating control shows the rating in a small or large non-interactive format. It is designed to be used with other components such as the data table, form cell, or object cell.

Large read-only rating control (top), small read-only rating control (middle), and small accented read-only rating control with a custom icon (bottom)

The interactive rating control is a larger tappable variation that enables the user to set the rating of an object. It can be used in a form cell, object cell or in a create form when the user is giving a rating for an object.

Interactive rating control (top), disabled interactive rating control (middle), and custom icon interactive rating control (bottom)