Rating
An accessible rating plugin that allows users to vote for your products.
Projects /
Projects /
An accessible rating plugin that allows users to vote for your products.
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.
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).
