Jump to content



The Rating widget takes a group of radio controls with numerical values, and replaces them with clickable stars so that users can indicate a rating value.






To use the rating widget, your HTML should contain the following structure:

<span data-ipsRating>
	<input type="radio" name="ratingValue" id="ratingValue_1" value="1"> <label for="ratingValue_1">1</label>
	<input type="radio" name="ratingValue" id="ratingValue_2" value="2"> <label for="ratingValue_2">2</label>			
	<input type="radio" name="ratingValue" id="ratingValue_3" value="3"> <label for="ratingValue_3">3</label>			
	<input type="radio" name="ratingValue" id="ratingValue_4" value="4"> <label for="ratingValue_4">4</label>			
	<input type="radio" name="ratingValue" id="ratingValue_5" value="5"> <label for="ratingValue_5">5</label>

The field name attributes, IDs and labels are not fixed; they can be anything. The radio values, however, should be numeric and in ascending order.

Any number of stars is supported - simply include the correct number of radio controls with the relevant values.



(String; optional)

If a URL is provided, it will be called via AJAX when the user clicks a star to choose a rating. The rating parameter will contain the selected value.


(Boolean; optional; default true)

Specifies whether the user can choose a new rating, if they have already rated the item.


(Boolean; optional; default true)

Determines whether the user can select a rating in the widget.


(Boolean; optional)

If specified, applies an additional ipsRating_ size class to the rating stars to control their size. Supported values: small, large, veryLarge.


Events emitted by ips.ui.rating

Events are emitted on the rating wrapper.


Triggered when the user selects a rating. If the url option is used, this will be triggered after the URL is successfully pinged. It will not be triggered if the URL fails.

Event data:

  • value
    Numeric value of the chosen rating



Triggered when the url option is used and pinging the provided URL fails.

Event data:

  • value
    Numeric value of the chosen rating

  Report Guide

  • Create New...