rating Component

Rating System

Basic Star Rating

Rating Sizes

Heart Rating

Emoji Rating

Number Rating

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

With Labels and Counts

4.5 / 5
(128)
3.8 / 5 (42)

Interactive States

Half Star Precision

Vertical Layout

4 / 5 Product Quality
5 / 5 Customer Love
Satisfaction

Compact Mode

Rating Bar Distribution

5 stars
85%
4 stars
10%
3 stars
3%
2 stars
1%
1 star
1%

Rating Summary

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

Form Integration

Animated Ratings

JavaScript API

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>