Rating Component


In its most traditional use case, the rating component is used to display a rating in your app and allows users to leave their own rating. However, there are a lot of different icons to choose from so you can customize the "meaning" of your ratings. For example, you could use five hearts in a quiz app to represent the five lives or five guesses that each player gets.




Rating Blocks

Event Blocks

When Rating On Rate

This event block fires when a user inputs a rating in the rating component.

Properties Blocks

There are two types of property blocks: dark green "set" and light green "get" blocks. The specific blocks available vary according to the UI component.

The dark green set blocks allow you to change the component's properties using blocks. For example, if you don't want a group component to be enabled for a user until they've typed a set number of characters into a text input component, you can use the group's dark green set group's disabled status block.

The light green get blocks allow you to access the properties of a component (e.g. color, font, width, text, etc.).


The direction property is unique to the rating icon. Using these blocks, you can define how the rating component is filled. You can choose between row (left to right), row-reverse (right to left), column (top to bottom) or column-reverse (bottom to top).

Icon Margin

The icon margin property is unique to the rating icon. Use these blocks to get or change the margin size between the icons of the rating component.

Last updated