Go to homepage

Projects /

Rating

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

View Demo

Dependencies

All components are compatible with CodyFrame, Tailwind CSS or any other CSS framework.

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).

Categories

Bug Report & Feedback

Component Github page ↗

Level up your CSS skills

Each month we email a 1-minute CSS tutorial to 20K developers

Awesome! We just sent you a confirmation link by email

Error - please try again or contact us

Your email address is already subscribed

Project duplicated

Project created

Globals imported

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