Star Rating
The Star Rating component can be used to gather user feedback and provide a visual representation of ratings, helping users make informed decisions, provide social proof, and evaluate the quality or popularity of a product or service.
Why Use It?
- Collect User Feedback: Ideal for capturing user opinions on products, services, or content in a simple, visual format.
- Display Ratings: Perfect for showing aggregated scores, like average ratings for items, courses, or articles.
- Enhanced User Experience: Offers an intuitive and interactive way for users to express preferences, including half-star precision for more accurate ratings.
Data
Property | Description | Expected Value |
|---|---|---|
| Label | Text to display as the label for the star rating. | String |
| Icon Type | Select the icon to display for the rating. | stars or heart |
| Number of stars | Total number of stars displayed on initial load. Default is 5. | Integer |
| Default number of selected stars | Sets how many stars are selected by default. Default is 3. | Integer or half |
| Allow editing | Toggle on to allow users to edit. | Boolean (true / false) |
| Enable half star | Toggle on to allow selection of half stars. Default is false. | Boolean (true / false) |
| Tooltips | Array of strings used to show informative tooltips for each star. Mapped by index. | Array of String (default: ["Very Poor","Poor","Average", "Good","Excellent"]) |
Events
Event | Description |
|---|---|
| On change | Triggers whenever the user clicks a star. |
info
Check Action Reference docs to get the detailed information about all the Actions.
Component Specific Actions (CSA)
The following actions of the component can be controlled using the component-specific actions (CSA), you can trigger it using an event or use a RunJS query.
Action | Description | RunJS Query |
|---|---|---|
| setValue( ) | Sets the current rating value programmatically. | components.starrating1.setValue() |
| resetValue( ) | Resets the rating to the default value. | components.starrating1.resetValue() |
| setVisibility( ) | Controls the visibility of the component. | components.starrating1.setVisibility() |
| setLoading( ) | Sets the component to a loading state. | components.starrating1.setLoading() |
| setDisable( ) | Disables user interaction with the component. | components.starrating1.setDisable() |
Exposed Variables
Variables | Description | How To Access |
|---|---|---|
| value | Holds the value entered by the user whenever a rating is added on the component. | {{components.starrating1.value}} |
| label | Holds the label name of the component. | {{components.starrating1.label}} |
| isLoading | Indicates if the component is loading. | {{components.starrating1.isLoading}} |
| isVisible | Indicates if the component is visible. | {{components.starrating1.isVisible}} |
| isDisabled | Indicates if the component is disabled. | {{components.starrating1.isDisabled}} |
Additional Actions
Action | Description | Configuration Options |
|---|---|---|
| Loading state | Enables a loading spinner, often used with isLoading to indicate progress. Toggle or set dynamically. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Visibility | Controls component visibility. Toggle or set dynamically. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Disable | Enables or disables the component. Toggle or set dynamically. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Tooltip | Provides additional information on hover. Set a string value for display. | String (e.g., Select an option. ). |
Devices
Property | Description | Expected Value |
|---|---|---|
| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Show on mobile | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
Styles
Label
| Property | Description | Configuration Options |
|---|---|---|
| Style | Choose whether to keep the label in standard or legacy style. | Dropdown: Standard, Legacy |
| Label color | Change the color of the label text. | Color picker / HEX / RGBA / Custom Themes |
| Alignment | Adjust the placement of the label relative to the component. | Side / Top and Left / Right |
| Width | Sets the width of the label. | Keep Auto width for standard sizing, or deselect to adjust using a slider or an fx expression returning a numeric value. |
Icon
| Property | Description | Configuration Options |
|---|---|---|
| Selected background | Color for selected icons (stars/hearts). | Color picker / HEX / RGBA / Custom Themes |
| Unselected background | Color for unselected icons (stars/hearts). | Color picker / HEX / RGBA / Custom Themes |
Container
| Property | Description | Configuration Options |
|---|---|---|
| Box shadow | Apply shadow styling to the component container. | Pick a shadow color, adjust properties, or define programmatically using fx. |
| Padding | Maintain consistent spacing inside the container. | Default or None |