rating Component

Rating System

Basic Star Rating

Preview Code
Copy

Rating Sizes

Preview Code
Copy

Heart Rating

Preview Code
Copy

Emoji Rating

Preview Code
Copy

Number Rating

Preview Code
Copy
1 2 3 4 5 6 7 8 9 10
1 2 3 4 5 6 7 8 9 10
1 2 3 4 5

Color Variants

Preview Code
Copy

With Labels and Counts

Preview Code
Copy
4.5 / 5
(128)
3.8 / 5 (42)

Interactive States

Preview Code
Copy

Half Star Precision

Preview Code
Copy

Vertical Layout

Preview Code
Copy
4 / 5 Product Quality
5 / 5 Customer Love
Satisfaction

Compact Mode

Preview Code
Copy

Rating Bar Distribution

Preview Code
Copy
5 stars
85%
4 stars
10%
3 stars
3%
2 stars
1%
1 star
1%

Rating Summary

Preview Code
Copy
4.5
Based on 2,451 reviews
5★
2,084
4★
245
3★
73
2★
25
1★
24

Form Integration

Preview Code
Copy

Animated Ratings

Preview Code
Copy

JavaScript API

Preview Code
Copy

Rating Class API Reference

Type Class/Attribute Usage Notes
Types rating star Star rating (default) ☆ ★ symbols
rating heart Heart rating ♡ ♥ symbols
rating emoji Emotion rating 😞 😐 😊 😍 🤩
rating number Numeric rating 1-10 scale
rating Base class (star default) Required
Sizes tiny Extra small size 0.875rem
small Small size 1rem
(default) Medium size 1.25rem
large Large size 1.5rem
big Extra large size 2rem
States readonly Display only No interaction
disabled Disabled state Grayed out
clearable Can be cleared Shows × button
animated Animated transitions Smooth fills
Layout vertical Vertical layout Stack elements
compact Compact spacing No gaps
with-label Show value label e.g., "4 / 5"
Data Attributes data-value Initial value 0-max range
data-max Maximum rating Default: 5
data-precision Step precision 0.5 or 1
data-count Review count e.g., "(128)"
data-label Show label "true" to show
data-name Form field name For form submit
data-tooltip Tooltip text Auto or custom
data-type Rating type Override class
Colors (default) Yellow stars Default color
primary Blue color Theme primary
positive Green color Success state
negative Red color Error state
warning Orange color Warning state

JavaScript API

Initialization

// Auto-initialized on page load
// Or manually initialize:
Rating.init(document.querySelector('.rating'));

// Initialize rating bar
Rating.initBar(document.querySelector('.rating-bar'));

Methods

// Set value
Rating.setValue('#my-rating', 4.5);

// Get value
const value = Rating.getValue('#my-rating');

// Clear rating
Rating.clear('#my-rating');

// Disable/Enable
Rating.disable('#my-rating');
Rating.enable('#my-rating');

Events

// Listen for rating changes
document.querySelector('.rating').addEventListener('ratingChange', function(e) {
    console.log('New value:', e.detail.value);
    console.log('Old value:', e.detail.oldValue);
    console.log('Type:', e.detail.type);
});

Form Integration

<form>
    <div class="rating star" data-name="product_rating" data-value="0">
        <span class="star"></span>
        <span class="star"></span>
        <span class="star"></span>
        <span class="star"></span>
        <span class="star"></span>
    </div>
    <button type="submit">Submit</button>
</form>

Usage Examples

Product Review

<div class="rating star" data-value="0" data-precision="0.5">
    <span class="star"></span>
    <span class="star"></span>
    <span class="star"></span>
    <span class="star"></span>
    <span class="star"></span>
</div>

Emoji Feedback

<div class="rating emoji" data-value="0" data-max="5">
    <span class="icon" data-value="1"></span>
    <span class="icon" data-value="2"></span>
    <span class="icon" data-value="3"></span>
    <span class="icon" data-value="4"></span>
    <span class="icon" data-value="5"></span>
</div>

Rating Summary Display

<div class="rating-summary">
    <div class="average">4.5</div>
    <div class="stars">
        <div class="rating star readonly" data-value="4.5" data-precision="0.5">
            <span class="star selected"></span>
            <span class="star selected"></span>
            <span class="star selected"></span>
            <span class="star selected"></span>
            <span class="star half"></span>
        </div>
        <div class="total">2,451 reviews</div>
    </div>
</div>