# Star Rating

The Bootstrap Star Rating Input Plugin creates a Star Rating input element. Users can click a star to assign a value to a thing. This is similar to the Yelp stars.

## Star Rating

### Min value

{% hint style="warning" %}
**Note:** When you set a minimum, this does not add “always filled in” stars. The stars show the width of the underlying slider. If the scale does not divide evenly across the number of stars, these steps might start overflowing. While this allows for some more complex setups, like starting with negative values, we recommend a minimum of 0 for most cases.
{% endhint %}

Enter the minimum value the stars can have.

### Max value

Enter the maximum value the stars can have.

### Step

This number represents how much one increment should modify the star's input value.

### Star size

Select a size for the stars. Choose from Xs, Sm, Md, Lg, and Xl.

### Initial content

This field defines what the initial value should be before the user modifies it. If the content is dynamic, the expression should be of type number.

### Stars color

Select the color for the stars not selected. For example, in a rating of 4/5, the fifth star will be this color.

### Rating color

Select the color for the stars selected. For example, in a rating of 4/5, the first four stars will be this color.

## Setup&#x20;

This plugin can let your users rate a product or service, as well as display that product or service's average rating. For example, let's say we add a Star Rating input, then start a workflow to create a new rating when its value is changed.

![](https://34394582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M5sbzwG7CljeZdkntrL%2F-MZsGl2z8W8ZUHamc1Y1%2F-MZsINcfsdjGQzqgOsoo%2FScreen%20Shot%202021-05-04%20at%2012.51.31%20PM.png?alt=media\&token=7fdcbe73-a347-4c05-b846-ccba4d98bf4f)

We'll save the Star Rating's value to a field of type number. This is how our users can add their own ratings. Next, we can add a second Star Rating input for the averages.&#x20;

![](https://34394582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M5sbzwG7CljeZdkntrL%2F-MZsGl2z8W8ZUHamc1Y1%2F-MZsILGpNGYob5Wmm5pq%2FScreen%20Shot%202021-05-04%20at%2012.51.20%20PM.png?alt=media\&token=b58ce7d2-9265-41a5-a230-8a6f6eeae205)

This time we will set an initial content for the input, or the amount of stars we want to display on page load. In this case, we will get the average of all the ratings so far.&#x20;

![](https://34394582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M5sbzwG7CljeZdkntrL%2F-MZsGl2z8W8ZUHamc1Y1%2F-MZsIJ3SNkOgqbO0f4aE%2FScreen%20Shot%202021-05-04%20at%2012.51.06%20PM.png?alt=media\&token=117e7700-2cde-40ca-8952-430c6e6f1538)

Now when we preview the page, we can leave our own review in the first input and watch as it affects the average in the second.

## FAQ

(Have a suggested FAQ to help other Bubblers? Please visit our [Support center](https://bubble.io/support) to get in touch with a member of our Support team!)


---

# 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://manual.bubble.io/core-resources/bubble-made-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.
