# Star Rating

> Plugin page: Coming soon

## Description

The Star Rating Plugin is a customizable rating component based on the Element Plus library's Rate component. This plugin allows users to rate content using stars, similar to other widely used rating systems. It is designed to be easily integrated into web applications with options to modify various aspects of the rating component, such as maximum rating value, whether half-stars are allowed, colors, and more. This plugin provides an easy way to collect user feedback in a visual format.

## How to Use

1. **Install the plugin**: Find the plugin and add it to your application.
2. **Place the input:** Find the "Star Rating" in elements sidebar and drag it into the desired area. Set the parameters.

<figure><img src="/files/avQ9NnkXzoIyySOHscNk" alt=""><figcaption></figcaption></figure>

If you have any questions, feel free to reach out at [<mark style="color:blue;">support@thesimplelabs.com</mark>](mailto:support@thesimplelabs.com)

## **Demo Page**

<https://plugindepartment.bubbleapps.io/version-test/star-rating>

## **Plugin Parameters**

1. **`value`**:
   * **Description**: Binding value representing the current rating.
   * **Type**: `number`
   * **Default**:  `''`
2. **`max`**:
   * **Description**: Maximum rating score.
   * **Type**: `number`
   * **Default**: `5`
3. **`size`**:
   * **Description**: Size of the rating stars.
   * **Type**: `enum` (e.g., `small`, `medium`, `large`)
4. **`disabled`**:
   * **Description**: Determines if the rating component is read-only.
   * **Type**: `boolean`
   * **Default**: `false`
5. **`allowHalf`**:
   * **Description**: Allows selection of half stars.
   * **Type**: `boolean`
   * **Default**: `false`
6. **`lowThreshold`**:
   * **Description**: Threshold value between low and medium levels, used for coloring.
   * **Type**: `number`
   * **Default**: `2`
7. **`highThreshold`**:
   * **Description**: Threshold value between medium and high levels, used for coloring.
   * **Type**: `number`
   * **Default**: `4`
8. **`colors`**:
   * **Description**: Custom colors for the icons based on the rating level, provided as a comma-separated string (e.g., `'#ffcc00,#ff9900,#ff6600'`).
   * **Type**: `string`
9. **`voidColor`**:
   * **Description**: Color of unselected icons.
   * **Type**: `string`
   * **Default**: `#c6d1de`
10. **`disabledVoidColor`**:
    * **Description**: Color of unselected read-only icons.
    * **Type**: `string`
    * **Default**: `#eff2f7`
11. **`voidIcon`**:
    * **Description**: The icon used for unselected stars.
    * **Type**: `string`
    * **Default**: `Star`
12. **`disabledVoidIcon`**:
    * **Description**: The icon used for unselected read-only stars.
    * **Type**: `string`
    * **Default**: `StarFilled`
13. **`showText`**:
    * **Description**: Whether to display helper texts next to the rating.
    * **Type**: `boolean`
    * **Default**: `false`
14. **`showScore`**:
    * **Description**: Whether to display the current score. It cannot be used simultaneously with `showText`.
    * **Type**: `boolean`
    * **Default**: `false`
15. **`textColor`**:
    * **Description**: The color of the text.
    * **Type**: `string`
    * **Default**: `''`
16. **`texts`**:
    * **Description**: Custom text to display at each rating level, provided as a comma-separated string (e.g., `'Very Bad,Bad,Neutral,Good,Excellent'`).
    * **Type**: `string`
    * **Default**: `''`
17. **`clearable`**:
    * **Description**: Allows the user to clear the rating back to zero.
    * **Type**: `boolean`
    * **Default**: `false`

## Icons

To see the available icon identifiers and their appearance, visit [Element Plus Icon Collection](https://element-plus.org/en-US/component/icon.html#icon-collection).

## Found a bug?&#x20;

If you suspect something isn't working quite right, please don't hesitate to send us a bug report. [Here's](/welcome-to-thesimplelabs-docs.md#how-to-report-a-bug) an instruction on how to file a bug report. \
\
Your input helps us quickly address issues and strive for continuous improvement. \
Thank you for your cooperation!


---

# Agent Instructions: 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:

```
GET https://docs.thesimplelabs.com/plugins/star-rating.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.