Webflow Libraries component
Install Finsweet in Webflow Libraries
Copy this component inside Designer
Use this docs page to further customize
Scroll to docs
Step #2
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.
Group
This
Div Block
must wrap all star elements (radio buttons) of the star rating functionality.
See how it works
Add this attribute
Description
Name
fs-starrating-element
Value
group
Add this attribute to a parent wrapper containing all stars.
For example, if a star rating set has 5 total stars, this attribute must be placed on a Div Block that wraps all 5 of the stars.
For example, if a star rating set has 5 total stars, this attribute must be placed on a Div Block that wraps all 5 of the stars.
Add this attribute
Description
Name
fs-starrating-element
Value
star
Add this attribute to any amount of Radio Button Fields inside a Webflow Form Block.
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.
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.
Add this attribute
Description
Name
fs-starrating-active
Value
class-name
Override the default custom class that is applied to active star elements.
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.
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.
Where?
Add to an element with fs-starrating-element = "group" to override the custom class for all star elements.
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.
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.
Working examples
See this solution working live in this Webflow project.
Example 1
Star Rating 1 - Default
Developer documentation
Check the dev documentation
Next time implement inside Webflow
Use Finsweet Extension
