Ctrlk
YouTube ChannelBook A Demo🪄 Build with AISubscribe for Updates
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Rating

The Avonni Rating component enables users to provide feedback and rate items using interactive star ratings.

The Rating component lets users select a numeric value within a configurable range, displayed as interactive icons (stars by default). It supports required, read-only, and disabled states and exposes the selected value as a flow output variable.

Overview

Use the Rating component in surveys, feedback flows, or anywhere you need a user to score something. The selected value is automatically available after the screen — wire an On Change interaction to respond in real time, or read the output variable in a subsequent flow step.

Example: A customer satisfaction survey flow asks users to rate their support experience. After the screen, use the Value output variable in a Decision element: ratings below 3 trigger an escalation path, while 4–5 trigger a thank-you message.

Configuration

To configure it, click the component on the Flow screen. The Edit Rating Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.

Properties

The Properties tab of the Rating property editor
Where these settings live: the Properties tab of the Edit Rating panel.
Setting
What It Does

Label

Text displayed above the rating input to describe what is being rated (e.g., "Rate your experience").

Value

The initial (pre-selected) rating value. Connect to a Salesforce field, a flow variable, or use a Query to aggregate a score (e.g., average rating across multiple records).

Field Level Help

An info icon tooltip displayed next to the label to guide users.

Icon Name

The Lightning Design System icon used for each rating symbol. Default: stars (utility:favorite). Can be changed to hearts, thumbs-up, or any utility icon.

Icon Size

Size of the rating icons: X-Small, Small, Medium, or Large (default).

Selection

Continuous (default) — users can select any decimal value. Single — restricts selection to whole numbers only.

Variant

Controls how the label is displayed: Standard (label above), Label Hidden, Label Inline (label to the left), or Label Stacked (floating label).

Minimum

The lowest selectable rating value. Connect to a field or set a query for a dynamic minimum.

Maximum

The highest selectable rating value (determines the total number of icons shown). Connect to a field or set a query for a dynamic maximum.

Required

When enabled, the user must provide a rating before the flow can advance.

Disabled

When enabled, the rating is visible but cannot be changed by the user.

Read Only

When enabled, displays the current value without allowing interaction.

The same Rating with no icon set and with three different Lightning Design System icons
With no Icon Name set the Rating draws numbered buttons. Any utility icon replaces them.
Two Ratings set to the same value of 3, one Continuous and one Single
The same value of 3, read two ways. Continuous fills every icon up to the value, Single fills only the one that matches it.
The four Rating label variants: Standard, Label Hidden, Label Inline and Label Stacked
The four label variants. Label Hidden is the second row, which draws no label at all.

Advanced Options

Setting
What It Does

Value Hidden

When enabled, hides the numeric value shown next to the icons.

Interactions

Interactions define what happens when users interact with the Rating. Configure them from the Interactions tab of the Edit Rating panel.

Change

Fires when the user selects or changes the rating value. Use this to respond in real time — for example, show a toast message, navigate to a different screen, or trigger a confetti animation based on the selected score.

Styling

The Style tab gives you fine-grained control over the Rating's appearance. Configure it from the Style tab of the Edit Rating panel.

Controls outer spacing.

  • Top: Space above the component.

  • Right: Space to the right of the component.

  • Bottom: Space below the component.

  • Left: Space to the left of the component.

Controls inner spacing.

  • Top: Inner space above the content.

  • Right: Inner space to the right of the content.

  • Bottom: Inner space below the content.

  • Left: Inner space to the left of the content.

Customizes the border.

  • Color: Border color.

  • Size: Border width.

  • Style: Border style (solid, dashed, etc.).

  • Radius: Corner rounding of the border.

Sets the background.

  • Color: Background color.

  • Linear Gradient: Background gradient.

Controls dimensions.

  • Width / Height: Component dimensions.

  • Min / Max Width / Height: Size constraints.

  • Overflow: How content behaves when it exceeds the component bounds.

Adjusts display when opened as a modal dialog inside a Flow screen.

  • Width: Dialog width.

  • Height: Dialog height.

  • Background Color: Dialog background color.

Styles the rating label text.

  • Color: Label text color.

  • Font Size: Label font size.

  • Font Style: Label font style (normal, italic, etc.).

  • Font Weight: Label font weight (normal, bold, etc.).

Styles the numeric value displayed next to the icons.

  • Color: Value text color.

  • Font Size: Value font size.

  • Font Style: Value font style (normal, italic, etc.).

  • Font Weight: Value font weight (normal, bold, etc.).

Styles the clickable icon buttons.

  • Background Color: Default button background.

  • Background Color Hover: Background when hovered.

  • Background Color Selected: Background when selected.

  • Background Color Disabled: Background when disabled.

  • Background Color Disabled Selected: Background when disabled and selected.

  • Text Color: Default icon color.

  • Text Color Hover: Icon color when hovered.

  • Text Color Selected: Icon color when selected.

  • Text Color Disabled: Icon color when disabled.

  • Text Color Disabled Selected: Icon color when disabled and selected.

Styles the border around each icon button.

  • Color: Default border color.

  • Color Hover: Border color when hovered.

  • Color Selected: Border color when selected.

  • Color Disabled: Border color when disabled.

  • Color Disabled Selected: Border color when disabled and selected.

  • Size: Border width.

  • Style: Border style (solid, dashed, etc.).

  • Radius: Corner rounding of the button border.

Styles the icon graphic inside each button.

  • Color: Default icon foreground color.

  • Color Hover: Icon color when hovered.

  • Color Selected: Icon color when selected.

  • Color Disabled: Icon color when disabled.

  • Color Disabled Selected: Icon color when disabled and selected.

Output Variables

The Rating exposes output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Rating component, and pick the output variable you need.

Selected Value

Output variable
Type
What it returns

Value

Integer

The numeric rating the user selected (e.g., 4 out of 5). This is automatically available after the screen — no interaction setup is needed to capture it.

Flow Interaction Output Variables

This component exposes Flow Interaction Output Variables — values surfaced to the interaction that fires on change, so a Flow interaction can read the selected rating as it happens.

Using the Rating Results

Once users have given their ratings, you can use that data within your flow:

  • Store It: Save the rating to a Salesforce record to track customer satisfaction, lead scores, etc.

  • Make Decisions: Use the rating to determine the next steps — a high rating leads to a thank-you message, while a low rating triggers a follow-up survey or escalation.

Last updated

Was this helpful?