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

Copy: View demo


All components are built upon the CodyHouse Framework.

This component includes variations. All variations share the same SCSS/JS code. They only differ in the HTML part.

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.

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

💌 Join our newsletter

Be the first to know when we ship something cool!