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 RatingValue
: 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 |
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. |
Last updated