AttRibutes
Star rating
What is this page about?

Attributes, by Finsweet, offers a free series of Solutions that provide essential features to improve your Webflow websites.

Star Rating

Star rating radio button component inside any Webflow form.

This Acessible Component is part of our Webflow Marketplace Library
Check out our free library
Open in Webflow

Star Rating • Flash Card

Copy Script

For advanced users familiar with this solution. Includes all attributes from this page. Click on attributes and values to copy them.

Required attributes

Group

Add to wrapper element that contains all the stars

fs-starrating-element
=
"
group
"

Star

Add to each individual star

fs-starrating-element
=
"
star
"

Optional attributes

Active Class

Override the default custom class that is applied to active star elements.

fs-starrating-active
=
"
CLASS-NAME
"
1

Add this <script> inside the <head> tag of your page or project

This script is the universal Attribute script: you only need to include it once, even if you have multiple Attribute solutions on the page. Learn more .

<script async type="module"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
fs-starrating
></script>

Copy Script
2

Add these required attributes to the elements

Group

Wrapper element for the star rating options
fs-starrating-element
=
"
group
"

Add this attribute to a parent wrapper containing all stars.

Add this attribute:
Name
fs-starrating-element
Copy
Value
group
Copy
Elements allowed:
Div Block
WHERE TO ADD IT
EXAMPLE

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.

Nested in

Star

Define the radio buttons needed for the star rating
fs-starrating-element
=
"
star
"

Add this attribute to any amount of Radio Button Fields inside a Webflow Form Block.

Add this attribute:
Name
fs-starrating-element
Copy
Value
star
Copy
Elements allowed:
Radio
IMPORTANT

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.

3

Publish your project! Done, easy right?

Check more elements and settings below
Optional

Add options

Active Class

Apply an active class to the active stars
fs-starrating-active
=
"
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.

Add this attribute:
Name
fs-starrating-active
Copy
Value
CLASS-NAME
Copy
Example:
fs-starrating-active = "is-active-star"
Add it to the element with
fs-starrating-element = "group" to override the custom class for all star elements.
fs-starrating-element = "star" to override the custom class for a specific star. Different active classes can be applied to different stars.
Optional

Add more

Instances

Define an instance on a common parent wrapper

fs-starrating-instance
=
"
IDENTIFIER
"

If you wish to create multiple instances of this solution on the same page, please follow the steps below:

  1. Select a wrapper parent that contains all the elements of an instance.
  2. Add an -instance attribute to it, with a unique value.
  3. Repeat for every instance.
Add this attribute:
Name
fs-starrating-instance
Copy
Value
IDENTIFIER
Copy
Examples:
fs-starrating-instance = "1"
fs-starrating-instance = "2"
fs-starrating-instance = "review"
fs-starrating-instance = "rate"
Learn more ways to set up multiple instances and how it works