Comment on page

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.

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

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.

Name	Description
change	The event fired when the value change.

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

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.

Last modified 19d ago