Tutorial: Star Rating Fields
Form Preview

What You'll Build

Interactive star rating components for collecting user ratings and feedback. Perfect for product reviews, service quality assessments, satisfaction surveys, and any scenario where you need visual rating input.

What You'll Learn

  • Adding basic star rating with default 5 stars
  • Customizing the number of stars (e.g., 10-star scale)
  • Enabling half-star ratings for more precision
  • Changing star sizes and colors
  • Controlling alignment (left, center, right) and counter visibility
  • Adding confetti celebration on max rating
  • Using computedValue to display calculated ratings (read-only output)
  • Making star ratings required with validation
  • Building a complete feedback form with multiple ratings
⚡

Interactive Learning

Every code snippet below is fully editable! Feel free to modify the code, experiment with different values, and see your changes reflected instantly in the live preview on the right.

Use the play button to run different snippet, or the refresh button to restore the original example.

Tutorial Steps

Step 1: Starting Point

Let's start with an empty form function. This is where we'll build our star rating form step by step.

Step 2: Basic Star Rating

Add a simple 5-star rating field. By default, star ratings display 5 stars that users can click to select their rating.

💡 Tip:
Use addStarRating() to add a star rating field. Click any star to set the rating - all stars up to and including the clicked one will be filled.

Step 3: Custom Number of Stars

Need a 10-point scale? Use maxStars to set any number of stars. You can also set a defaultValue for pre-selected ratings.

💡 Tip:
The maxStars property controls how many stars are displayed. Use defaultValue to pre-select a rating (e.g., 7 out of 10).

Step 4: Half-Star Ratings

Enable half-star precision for more granular ratings. When enabled, clicking on the left half of a star selects a half value (e.g., 3.5 stars).

💡 Tip:
Set allowHalf: true to enable half-star ratings. Users can click on the left half of a star for .5 values (like 2.5, 3.5, etc.). Great for movie or product reviews!

Step 5: Sizes and Custom Colors

Customize the appearance with different sizes and colors. Choose from four sizes (sm, md, lg, xl) and set custom colors for filled and empty states.

💡 Tip:
Use size: 'sm' | 'md' | 'lg' | 'xl' for small, medium, large, or extra large stars. Customize colors with filledColor and emptyColor using any valid CSS color.

Step 6: Alignment and Counter

Control horizontal alignment of stars and toggle the counter display. Perfect for different layout requirements.

💡 Tip:
Use alignment: 'left' | 'center' | 'right' to position stars. Set showCounter: false to hide the "3/5" counter.

Step 7: Confetti Celebration

Add a fun confetti animation when users select the maximum rating! Works with both user input and computed values.

💡 Tip:
Set showConfettiOnMax: true to trigger confetti when max is reached. This also works with computedValue - try setting both Quality and Value to 5 stars!

Step 8: Computed Ratings (Read-Only)

Use computedValue to display a calculated rating as read-only output. This is useful for showing averages, aggregated scores, or any derived rating.

💡 Tip:
When using computedValue, the star rating becomes read-only and automatically updates when the source ratings change. Perfect for showing average ratings!

Step 9: Deselect Behavior

Control whether users can change their mind by clicking the same star again to clear their selection.

💡 Tip:
By default, allowDeselect: true lets users clear their selection by clicking the same rating twice. Set to false to make the choice permanent - once a rating is selected, it cannot be removed.

Step 10: Required Validation

Make star ratings required to ensure users provide feedback before submitting the form. Required ratings show a validation error until a selection is made.

💡 Tip:
Set isRequired: true to require a rating. The field will show a red asterisk (*) next to the label and display an error message if the user tries to submit without selecting a rating. Try clicking Submit without selecting any stars to see the validation in action!

Step 11: Complete Feedback Form

Let's build a complete service feedback form with multiple rating categories. This demonstrates how star ratings work alongside other form fields, including required validation.

💡 Tip:
Combine multiple star ratings to collect detailed feedback across different dimensions. Notice how "Overall Experience" and "Service Quality" are required (marked with *), while "Response Speed" and "Value for Money" are optional.

Try It Yourself

  • Challenge 1: Create a 10-star rating with half-star precision and green color scheme
  • Challenge 2: Build a product review form with ratings for quality, packaging, and delivery
  • Challenge 3: Add a computed field that shows "Excellent!", "Good", or "Needs Improvement" based on the rating value

Next Steps

Great job! You've learned how to add interactive star ratings to your forms. Ready to explore more form components?

Continue to Slider Tutorial

Other learning paths: