> For the complete documentation index, see [llms.txt](https://docs.acho.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.acho.io/app-builder/app-construction/elements/web-elements/rate.md).

# Rate

The rate element shows star rating scores. Rate divides rating scores into several levels and these levels can be distinguished by using different background colors.

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2F77FxnXcE3phOrD64bHEk%2Fimage.png?alt=media&amp;token=c6b72d66-3009-4dd4-b253-418e592efaee" alt=""><figcaption></figcaption></figure>

You can change the icons to your desired shape by clicking on the [Icon](/app-builder/app-construction/elements/web-elements/icon.md) within the rate element and altering its type.&#x20;

* Changing the first (yellow) icon will set the style of the icons which show the selected rating.&#x20;
* Changing the second (gray) icon will set the style of the icons which show the maximum rating.
* i.e. if the selected rating is 3 out of 5, the page will display 3 icons of the first style followed by 2 icons of the second style.

## Properties

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FugB0PKW80s9YCtPn6scu%2Fimage.png?alt=media&amp;token=4ce11d32-a2c1-4ee5-a275-fcad32173dbb" alt=""><figcaption></figcaption></figure>

**Max Score:** Set the maximum rating

**Default Score:** Set what rating is shown by default

**Allow Half:** Toggle whether user can set a half rating

**Clearable:** Toggle whether user can clear the rating once its set

**Disabled:** Toggle to disable rating element

See [Tooltip](/app-builder/app-construction/elements/tooltip.md) for tooltip configurations.

## Supported Events

**Change:** Triggered when a user changes the rating.

## Supported Actions

**Set Score Value:** Set the value of the score.

**Set Data:** Change element data. See [Data Store](/app-builder/app-construction/data-store.md).

**Set Loading:** Set loading animation. See [Set loading animations](/app-builder/popular-use-cases/set-loading-animations.md).

{% hint style="info" %}
Visit [Interactions](/app-builder/app-construction/interactions.md) for more on events and actions.
{% endhint %}