How to add an attribute:

close icon
Hey! Give us some feedback here.
Forms

Star Rating

Star rating radio button component inside any Webflow form.

Star Rating

Webflow Libraries component

Install Finsweet in Webflow Libraries
Copy this component inside Designer
Use this docs page to further customize
Scroll to docs
Step #1

Copy the Solution <script> and paste into the <head> of your page

copy icon
Copy Script
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.

navigator arrow
Group
This
div block icon

Div Block

must wrap all star elements (radio buttons) of the star rating functionality.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-starrating-element
copy icon
Value
group
copy icon
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.
navigator arrow
Star
I want this
div block icon

Radio Button

to be a star for star rating functionality.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-starrating-element
copy icon
Value
star
copy icon
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.
navigator arrow
Option
ACTIVE CLASS
I want to override the default active class for star elements
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-starrating-active
copy icon
Value
class-name
copy icon
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.
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.

Working examples

See this solution working live in this Webflow project.

Example 1
Star Rating 1 - Default
Copy and paste this example inside Webflow Libraries
Go to Webflow Libraries
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Example 2
Star Rating 2 - Emojis
Copy and paste this example inside Webflow Libraries
Go to Webflow Libraries
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Developer documentation

external link icon

Next time implement inside Webflow

external link icon
Subscribe

Sign up for future releases!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.