Implement in Webflow
Apply attributes to elements on the page
Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.
Follow these steps for star rating functionality:
— Add 2, 3, 4, 5, or more Radio Button Fields inside a form. Attributes will automatically adjust the star rating functionality based on the amount of Radio Button Fields added.
— Assign the same "Group Name" to all Radio Button Fields.
— Assign a "Choice Value" equal to each Radio Button Fields star value. For example, the first star should get a "Choice Value" of "1". The second star should get a value of "2". The third star should get a value of "3". Etc.
— Style the Radio Button to visually display as stars.
On the published page, star rating will work as expected.
When stars are selected in the star rating functionality, active classes are given to stars to show the selected state.
The default active class is .is-active-star.
To change the default active class, apply this attribute with the custom class name as the value.
Add to an element with fs-starrating-element = "star" to override the custom class for a specific star. Different active classes can be applied to different stars.
See this solution working live in this Webflow project.