Theme:

Rating Component

Interactive Rating

☆☆☆☆☆

0.0 ()

Click on the stars to change the rating

let rating = $state(3);

<Rating bind:rating={rating} />

Read-Only Rating

☆☆☆☆☆

0.0 ()

This rating cannot be changed by the user

<Rating rating={4} readonly />

Custom Scale

☆☆☆☆☆

0.0 ()

Using a 10-star scale instead of the default 5

let rating = $state(7);

<Rating bind:rating={rating} scale={10} />

Zero Rating

☆☆☆☆☆

0.0 ()

Click the first star to toggle between 1 star and no rating

let rating = $state(0); // Start with no rating

<Rating bind:rating={rating} />

Different Scales Comparison

3-Star Scale

☆☆☆☆☆

0.0 ()

5-Star Scale (Default)

☆☆☆☆☆

0.0 ()

7-Star Scale

☆☆☆☆☆

0.0 ()

10-Star Scale

☆☆☆☆☆

0.0 ()

<Rating rating={2} scale={3} readonly />
<Rating rating={`{5}`} scale={`{5}`} readonly />
<Rating rating={`{5}`} scale={`{7}`} readonly />
<Rating rating={`{8}`} scale={10} readonly />

Usage Examples

Product Rating

☆☆☆☆☆

0.0 ()

based on 127 reviews

Service Quality

☆☆☆☆☆

0.0 ()

Excellent

User Experience

☆☆☆☆☆

0.0 ()

Average

Rate this experience

☆☆☆☆☆

0.0 ()

Click to rate

Features

Key Features:

• Interactive: Click to select a rating or click the first star to toggle between 1 and 0
• Read-Only Mode: Display ratings without allowing user interaction
• Custom Scale: Support for any number of stars (default is 5)
• Zero Rating: Supports no rating (0 stars) state
• Visual Feedback: Hover effects for interactive ratings
• Accessible: Proper ARIA labels and keyboard support
• Responsive: Works well on both desktop and mobile devices