> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/rating.md).

# Rating

The Avonni Rating component lets users select a numeric value by clicking on a row of icons — typically stars — making it a simple, visual way to collect feedback or display an existing rating score.

## Overview

The Rating component renders a series of icons side-by-side. Users click an icon (or slide across multiple icons with **Continuous** selection) to set their rating. The component also works as a read-only display when showing pre-existing values pulled from Salesforce.

Two presets are available in the Component Builder:

* **Rating** — uses the default number-button style with no custom icon.
* **Rating Custom Icon** — replaces the number buttons with any Lightning Design System icon (e.g. a star, thumbs-up, or smiley face). The **Icon Size** setting is only available in this preset.

## Configuration

To configure the Rating, select it on the canvas. The **Edit Rating** panel opens on the right with three tabs: **Properties**, **Interactions**, and **Style**. The sections below mirror the Properties tab.

### Properties

#### Label

The text label displayed above or beside the rating icons. Keep it short and descriptive — for example, "Overall Satisfaction" or "Product Quality".

#### Value

The current rating value. Bind this to a Number variable to store the user's selection and use it elsewhere in your component. You can also pull the value from Salesforce using **Query mode**, which lets you aggregate a numeric field (SUM, COUNT, AVG, MIN, or MAX) across a set of records — useful for displaying an average rating.

#### Field Level Help

Optional help text shown next to the label to give users extra context about what they are rating.

#### Icon Name

*(Rating Custom Icon preset only)* The Lightning Design System name of the icon used as the rating symbol — for example, `utility:star` or `utility:like`. When set, the number buttons are replaced with the chosen icon.

#### Icon Size

*(Rating Custom Icon preset only — requires **Icon Name** to be set)* The size of the rating icon. Options: **Xs**, **Small**, **Medium**, **Large** (default: **Large**).

#### Selection

Controls how a user selects a rating value:

* **Continuous** (default) — the user can click and drag across icons to select a value in one gesture.
* **Single** — the user clicks a single icon to set the value.

#### Variant

Controls how the label is positioned relative to the rating icons:

* **Standard** (default) — label appears above the icons.
* **Label Hidden** — the label is not shown; use only when the purpose is clear from context.
* **Label Inline** — label appears to the left of the icons on the same line.
* **Label Stacked** — label appears above, visually stacked with the icons.

#### Min

The minimum acceptable rating value. Bind it directly to a number or use Query mode to derive it from a Salesforce field.

#### Max

The maximum acceptable rating value — this also determines how many icons are displayed. Bind it directly to a number or use Query mode to derive it from a Salesforce field.

#### Required

If enabled, the user must select a rating before they can submit the form.

#### Rating Value Labels

An optional collection that maps numeric rating ranges to descriptive labels displayed alongside the selected value. Each entry has:

* **Assigned Label** — the text to display (e.g. "Excellent").
* **Minimum Rating Value** — the lower bound of the range (required).
* **Maximum Rating Value** — the upper bound of the range (required).

#### Value Hidden

*(Advanced)* If enabled, the numeric rating value is hidden and only the icons are shown.

#### Read Only

*(Advanced)* If enabled, the rating is visible but cannot be changed by users. Use this to display existing ratings without allowing edits.

#### Disabled

*(Advanced)* If enabled, the component is fully disabled. Users cannot interact with it and it appears greyed out.

### Set Component Visibility

All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md).

## Interactions

[Interactions](/dynamic-components/component-builder/interactions.md) 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 a new rating value. Use this to store the selected value in a variable, trigger a flow, or refresh other components on the page based on the new rating.

## 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.

{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the component.

* **Top / Right / Bottom / Left:** Adjust the space on each side.
  {% endtab %}

{% tab title="Padding" %}
Controls the *inner* spacing between the component's content and its edges.

* **Top / Right / Bottom / Left:** Adjust the inner spacing on each side.
  {% endtab %}

{% tab title="Size" %}
Controls the component's dimensions.

* **Width / Height:** Set fixed dimensions.
* **Min Width / Max Width / Min Height / Max Height:** Constrain the size within bounds.
* **Overflow:** Control how content that exceeds the bounds is handled.
  {% endtab %}

{% tab title="Border" %}
Customizes the border surrounding the component.

* **Color:** Set the border color.
* **Size:** Adjust the border thickness.
* **Style:** Choose a border style (e.g. solid, dashed, dotted).
* **Radius:** Control the roundness of the corners.
  {% endtab %}

{% tab title="Horizontal Alignment" %}
Aligns the rating icons within their container.

* **Horizontal Alignment:** Set the horizontal position of the icons.
  {% endtab %}

{% tab title="Label" %}

* **Color:** Set the label text color.
* **Font Size:** Adjust the label font size.
* **Font Style:** Set the label to normal or italic.
* **Font Weight:** Control the label font weight (e.g. bold).
  {% endtab %}

{% tab title="Value" %}

* **Color:** Set the numeric value text color.
* **Font Size:** Adjust the value font size.
* **Font Style:** Set the value text to normal or italic.
* **Font Weight:** Control the value text font weight.
  {% endtab %}

{% tab title="Button" %}
Customize the appearance of each rating button in its various states:

* **Background Color** — default, hover, selected, disabled, disabled-selected.
* **Text Color** — default, hover, selected, disabled, disabled-selected.
  {% endtab %}

{% tab title="Button Border" %}

* **Color** — border color in default, hover, selected, disabled, and disabled-selected states.
* **Size:** Set the border thickness.
* **Style:** Choose the border line style (solid, dashed, etc.).
* **Radius:** Round the corners of each rating button.
  {% endtab %}

{% tab title="Icon" %}
*(Rating Custom Icon preset)* Customize the icon color in each state:

* **Color** — default, hover, selected, disabled, disabled-selected.
  {% endtab %}
  {% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/components/rating.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.