Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/finsweet/attributes/llms.txt

Use this file to discover all available pages before exploring further.

The fs-starrating attribute creates an interactive star rating component that works seamlessly with Webflow forms as radio button groups.

​
Overview

Star Rating transforms standard radio inputs into an intuitive star rating interface:
  • Visual star rating interface for forms
  • Accessible with proper ARIA attributes
  • Works with native Webflow form submissions
  • Customizable active state styling
  • Hover and selection effects

​
Basic Usage

​
Simple Star Rating

Create a 5-star rating system: 
<!-- Star Rating Group -->
<div fs-starrating="group" class="rating-group">
  <!-- Each star is a radio button -->
  <label class="star-label">
    <input type="radio" name="rating" value="1" fs-starrating="star">
    <span class="star-icon">★</span>
  </label>
  
  <label class="star-label">
    <input type="radio" name="rating" value="2" fs-starrating="star">
    <span class="star-icon">★</span>
  </label>
  
  <label class="star-label">
    <input type="radio" name="rating" value="3" fs-starrating="star">
    <span class="star-icon">★</span>
  </label>
  
  <label class="star-label">
    <input type="radio" name="rating" value="4" fs-starrating="star">
    <span class="star-icon">★</span>
  </label>
  
  <label class="star-label">
    <input type="radio" name="rating" value="5" fs-starrating="star">
    <span class="star-icon">★</span>
  </label>
</div>
The radio inputs should have the same name attribute to ensure only one rating can be selected at a time.

​
Attribute Reference

​
Element Attributes

AttributeValueDescription
fs-starratinggroupDefines the star rating group wrapper
fs-starratingstarDefines individual star radio inputs

​
Settings Attributes

AttributeValuesDefaultDescription
fs-starrating-activeclassCSS class nameis-starrating-activeCSS class applied to active/selected stars

​
Styling Star Ratings

Create visual feedback for star states: 
/* Hide the radio inputs */
.star-label input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Default star appearance */
.star-icon {
  font-size: 2rem;
  color: #ddd;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Hover effect */
.star-label:hover .star-icon {
  color: #ffd700;
  transform: scale(1.1);
}

/* Active/Selected stars */
.is-starrating-active .star-icon {
  color: #ffd700;
}

/* Custom active class */
.star-filled .star-icon {
  color: #ff6b00;
  text-shadow: 0 0 10px rgba(255, 107, 0, 0.5);
}

​
Examples

​
Product Review Rating

<form class="review-form">
  <div class="form-field">
    <label class="field-label">Product Quality</label>
    <div fs-starrating="group" class="star-rating">
      <label>
        <input type="radio" name="quality" value="1" fs-starrating="star">
        <span class="star">★</span>
      </label>
      <label>
        <input type="radio" name="quality" value="2" fs-starrating="star">
        <span class="star">★</span>
      </label>
      <label>
        <input type="radio" name="quality" value="3" fs-starrating="star">
        <span class="star">★</span>
      </label>
      <label>
        <input type="radio" name="quality" value="4" fs-starrating="star">
        <span class="star">★</span>
      </label>
      <label>
        <input type="radio" name="quality" value="5" fs-starrating="star">
        <span class="star">★</span>
      </label>
    </div>
  </div>
  
  <div class="form-field">
    <label class="field-label">Value for Money</label>
    <div fs-starrating="group" class="star-rating">
      <label>
        <input type="radio" name="value" value="1" fs-starrating="star">
        <span class="star">★</span>
      </label>
      <label>
        <input type="radio" name="value" value="2" fs-starrating="star">
        <span class="star">★</span>
      </label>
      <label>
        <input type="radio" name="value" value="3" fs-starrating="star">
        <span class="star">★</span>
      </label>
      <label>
        <input type="radio" name="value" value="4" fs-starrating="star">
        <span class="star">★</span>
      </label>
      <label>
        <input type="radio" name="value" value="5" fs-starrating="star">
        <span class="star">★</span>
      </label>
    </div>
  </div>
  
  <textarea name="comments" placeholder="Additional comments..."></textarea>
  <button type="submit">Submit Review</button>
</form>

​
Custom Star Icons

Use custom icons or images instead of the star character: 
<div fs-starrating="group">
  <label>
    <input type="radio" name="rating" value="1" fs-starrating="star">
    <img src="star-empty.svg" class="star-image">
  </label>
  <label>
    <input type="radio" name="rating" value="2" fs-starrating="star">
    <img src="star-empty.svg" class="star-image">
  </label>
  <label>
    <input type="radio" name="rating" value="3" fs-starrating="star">
    <img src="star-empty.svg" class="star-image">
  </label>
  <label>
    <input type="radio" name="rating" value="4" fs-starrating="star">
    <img src="star-empty.svg" class="star-image">
  </label>
  <label>
    <input type="radio" name="rating" value="5" fs-starrating="star">
    <img src="star-empty.svg" class="star-image">
  </label>
</div>

<style>
.is-starrating-active .star-image {
  content: url('star-filled.svg');
}
</style>

​
Half-Star Ratings

Create a 10-point scale with half stars: 
<div fs-starrating="group" class="half-star-rating">
  <!-- 0.5 star -->
  <label>
    <input type="radio" name="rating" value="0.5" fs-starrating="star">
    <span class="star-half">★</span>
  </label>
  <!-- 1 star -->
  <label>
    <input type="radio" name="rating" value="1" fs-starrating="star">
    <span class="star-full">★</span>
  </label>
  <!-- 1.5 stars -->
  <label>
    <input type="radio" name="rating" value="1.5" fs-starrating="star">
    <span class="star-half">★</span>
  </label>
  <!-- 2 stars -->
  <label>
    <input type="radio" name="rating" value="2" fs-starrating="star">
    <span class="star-full">★</span>
  </label>
  <!-- Continue pattern... -->
</div>

​
With Labels

<div fs-starrating="group" class="rating-with-labels">
  <div class="rating-stars">
    <label>
      <input type="radio" name="satisfaction" value="1" fs-starrating="star">
      <span>★</span>
    </label>
    <label>
      <input type="radio" name="satisfaction" value="2" fs-starrating="star">
      <span>★</span>
    </label>
    <label>
      <input type="radio" name="satisfaction" value="3" fs-starrating="star">
      <span>★</span>
    </label>
    <label>
      <input type="radio" name="satisfaction" value="4" fs-starrating="star">
      <span>★</span>
    </label>
    <label>
      <input type="radio" name="satisfaction" value="5" fs-starrating="star">
      <span>★</span>
    </label>
  </div>
  <div class="rating-labels">
    <span class="label-min">Poor</span>
    <span class="label-max">Excellent</span>
  </div>
</div>

​
Accessibility Features

Radio Group

Implements proper ARIA radiogroup role for assistive technologies.

Keyboard Navigation

Supports arrow key navigation between stars and space/enter to select.

Screen Readers

Radio inputs are properly labeled and announced to screen readers.

Form Integration

Works with native form submission and validation.
Always use semantic HTML with proper label elements to ensure the star rating is accessible to all users.

​
JavaScript API

Access the Star Rating API programmatically: 
window.FinsweetAttributes ||= [];
window.FinsweetAttributes.push([
  'starrating',
  () => {
    // Star rating groups are initialized
    console.log('Star rating initialized');
    
    // Custom logic here
  },
]);

​
Best Practices

Ensure all radio inputs in a group share the same name attribute. Different rating groups should have different names.
<!-- Good -->
<input type="radio" name="quality" value="1">
<input type="radio" name="quality" value="2">

<!-- Bad -->
<input type="radio" name="star1" value="1">
<input type="radio" name="star2" value="2">
Visually hide the radio inputs but keep them accessible:
input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
Never use display: none as it removes the input from the accessibility tree.
Always style hover states and active states clearly:
/* Hover effect */
.star-label:hover .star {
  color: gold;
}

/* Selected stars */
.is-starrating-active .star {
  color: gold;
}
If the rating is required, add the required attribute to one of the radio inputs:
<input type="radio" name="rating" value="1" required fs-starrating="star">
Make sure the name attribute is the same for all stars in a rating group. Different groups should have different names.