Go to homepage

Projects /


An accessible rating plugin that allows users to vote for your products.

View Demo

How to

The rating component is used to allow users to rate products and display information about the average rating value.

If Javascript is disabled, the stars are replaced by the <select> element so that users can vote anyway. If javascript is enabled, the <select> is hidden and the stars are injected into the DOM. To make sure the component is accessible, each star represents a radio button with a unique value (from 1 to 5).

To change the star icon, replace the SVG code within the .rating__control element.

The data-animation="on" attribute is used to enable some animated effects. Remove it if you prefer a version of the plugin with no animation.

Read-only variation #

The --read-only variation disables the option to interact with the icons and is used to display information about the average rating value.

The value wrapped within the .js-rating__value is used in JS to set the number of active vs. inactive stars.

In the --link variation, the rating stars are a link (e.g., to the reviews page).


Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.