Rating

A picker to select a rating using stars, emoji, or numbers.

Overview

The Rating component allows users to rate something on a scale. This component is commonly used for gathering feedback or rating products or services. It consists of a series of clickable icons, with the number of highlighted stars representing the rating. The Rating Flow Screen component is a simple and intuitive way to gather ratings within a flow.

Changing the Properties

Adding a value

By default, it's 1. You can specify a specific value if needed.

Choosing an icon

Rating values can be set with an icon instead of using numbers. You have access to all Lightning Design System icons.

Adding Min/Max Values

You can set minimum and maximum acceptable values for the Rating component.

Adding Interactions

Interactions define what will happen when users interact with the Rating component. You can find a list of interactions available here.

Here are the available interactions for the Rating component:

• On Change: The event is fired when the value changes.

Styling the Rating

From the Styles panel, you can customize styling attributes for the Rating:

• Header: to customize colors for the Rating

• Value: to customize colors for the Rating

You can find the instructions for styling here.

Examples

Property	Value
Label	Star Rating
Field Level Help	Rate this
Icon Name	utility:favorite
Icon Size	Large
Selection	Continuous
Variant	Label Stacked
Min	1
Max	5
Value Hidden	Yes

Specifications

Attributes

Name	Type	Description
disabled	Boolean	End-user can't interact with the rating component.
fieldLevelHelp	String	Help text detailing the purpose and function of the rating component.
iconName	String	The Lightning Design System name of the icon. Specify the name in the format 'utility:favorite' where 'utility' is the category, and 'favorite' is the specific icon to be displayed
iconSize	String	Valid values include x-small, small, medium and large.
label	String	Label for the rating component
max	Integer	The maximum acceptable value for the rating component.
min	Integer	The minimum acceptable value for the rating component.
readOnly	Boolean	If present, the rating component is read-only and cannot be edited by users.
required	Boolean	If present, the input field must be filled out before the form is submitted.
selection	String	Valid values include continuous and single.
value	Integer	Specifies the value of the rating.
valueHidden	Boolean	Hide the rating fraction representation (e.g. "4/5" rating).
variant	String	To change the appearance of the label layout.

Events

Name	Description
change	The event fired when the value change.

Styling Hooks

Header

Name	Description
Text Color	Define a text color for the header if a label text is present
Font Size	Define a font size for the header if a label text is present
Font Style	Define a font style for the header if a label text is present
Font Weight	Define a font weight for the header if a label text is present

Value

Name	Description
Text Color	Define a text color for the value once a rating is pressed.
Font Size	Define a font size for the value once a rating is pressed.
Font Style	Define a font style for the value once a rating is pressed.
Font Weight	Define a font weight for the value once a rating is pressed.