An accessible rating plugin that allows users to vote for your products.
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.
The rating component is used to allow users to rate products and display information about the average rating value.
<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
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 #
--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.