Playground

Rating

A rating component that allows users to rate items on a scale.

+ Tailwind and Alpine
Copied!
Rated Stars
<div x-data="{
        disabled: false,
        max_stars: 5,
        stars: 0,
        value: 0,
        hoverStar(star){
            if (this.disabled) {
                return;
            }

            this.stars = star; 
        },
        mouseLeftStar(){
            if (this.disabled) {
                return;
            }
        
            this.stars = this.value;
          },
        rate(star){
            if (this.disabled) {
                return;
            }

            this.stars = star;
            this.value = star;

            $refs.rated.classList.remove('opacity-0');
            setTimeout(function(){
                $refs.rated.classList.add('opacity-0');
            }, 2000);
        },
        reset(){
            if (this.disabled) {
                return;
            }

            this.value = 0;
            this.stars = 0;
        }
    }" x-init="this.stars = this.value">
    <div class="flex flex-col items-center max-w-6xl mx-auto jusitfy-center">
        <div x-ref="rated" class="absolute -mt-2 text-xs font-medium text-gray-900 duration-300 ease-out -translate-y-full opacity-0">Rated <span x-text="value"></span> Stars</div>
        <ul class="flex">
            <template x-for="star in max_stars">
                <li @mouseover="hoverStar(star)" @mouseleave="mouseLeftStar" @click="rate(star)" class="px-1 cursor-pointer" :class="{ 'text-gray-400 cursor-not-allowed': disabled}">
                    <svg x-show="star > stars" class="w-6 h-6 text-gray-900" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M128,189.09l54.72,33.65a8.4,8.4,0,0,0,12.52-9.17l-14.88-62.79,48.7-42A8.46,8.46,0,0,0,224.27,94L160.36,88.8,135.74,29.2a8.36,8.36,0,0,0-15.48,0L95.64,88.8,31.73,94a8.46,8.46,0,0,0-4.79,14.83l48.7,42L60.76,213.57a8.4,8.4,0,0,0,12.52,9.17Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                    <svg x-show="star <= stars" class="w-6 h-6 text-gray-900 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z"/></svg>
                </li>
            </template>
        </ul>
        <button @click="reset" class="inline-flex items-center px-2 py-1 mt-3 text-xs text-white bg-gray-900 rounded-full hover:bg-black hover:text-white">
            <svg class="w-3 h-3 mr-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><polyline points="24 56 24 104 72 104" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"/><path d="M67.59,192A88,88,0,1,0,65.77,65.77L24,104" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"/></svg>
            <span>Reset</span>
        </button>
    </div>
</div>

Data

Below you will find the data properties available in the x-data attribute of this element.

Property and Description
disabled
Indicates whether the rating functionality is disabled. If true, user interactions are ignored.
max_stars
The maximum number of stars available for rating.
stars
The current number of stars selected by the user during the rating process.
value
The final rating value that is set when the user clicks on a star.
hoverStar(star)
Updates the stars property to reflect the star being hovered, unless the rating is disabled.
mouseLeftStar()
Resets the stars to the current value during mouseleave event, unless the rating is disabled.
rate(star)
Sets the stars and value to the selected star when clicked, and shows a temporary rating message.
reset()
Resets both stars and value to 0, allowing the user to start the rating process over.

More Examples

Below you will find more Rating examples you may wish to use in your projects.

Copied!
Rated 
<div x-data="{
    disabled: false,
    max_stars: 5,
    stars: 0,
    value: 0,
    hoverStar(star){
        if (this.disabled) {
            return;
        }

        this.stars = star; 
    },
    mouseLeftStar(){
        if (this.disabled) {
            return;
        }
    
        this.stars = this.value;
    },
    rate(star){
        if (this.disabled) {
            return;
        }

        this.stars = star;
        this.value = star;

        $refs.rated.classList.remove('opacity-0');
        setTimeout(function(){
            $refs.rated.classList.add('opacity-0');
        }, 2000);
    },
    reset(){
        if (this.disabled) {
            return;
        }

        this.value = 0;
        this.stars = 0;
    }
}" x-init="this.stars = this.value">
<div class="relative flex items-center w-auto mx-auto jusitfy-center">
    <div x-ref="rated" class="absolute pl-1 -mt-2 text-sm text-pink-500 duration-300 ease-out -translate-y-full opacity-0">Rated <span x-text="value"></span></div>
    <ul class="flex">
        <template x-for="star in max_stars">
            <li @mouseover="hoverStar(star)" @mouseleave="mouseLeftStar" @click="rate(star)" class="px-1 cursor-pointer" :class="{ 'text-gray-400 cursor-not-allowed': disabled}">
                <svg x-show="star > stars" class="w-6 h-6 text-pink-600 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M128,224S24,168,24,102A54,54,0,0,1,78,48c22.59,0,41.94,12.31,50,32,8.06-19.69,27.41-32,50-32a54,54,0,0,1,54,54C232,168,128,224,128,224Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                <svg x-show="star <= stars" class="w-6 h-6 text-pink-600 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M128,224S24,168,24,102A54,54,0,0,1,78,48c22.59,0,41.94,12.31,50,32,8.06-19.69,27.41-32,50-32a54,54,0,0,1,54,54C232,168,128,224,128,224Z" opacity="0.2"/><path d="M128,224S24,168,24,102A54,54,0,0,1,78,48c22.59,0,41.94,12.31,50,32,8.06-19.69,27.41-32,50-32a54,54,0,0,1,54,54C232,168,128,224,128,224Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
            </li>
        </template>
    </ul>
    <button x-show="value" @click="reset" class="absolute right-0 inline-flex items-center justify-center w-5 h-5 -mr-1 text-xs text-pink-600 translate-x-full bg-pink-100 rounded-full hover:bg-pink-400 hover:text-white">
        <svg class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
    </button>
</div>
</div>
Copied!
Rated Stars
<div x-data="{
    disabled: false,
    max_stars: 5,
    stars: 0,
    value: 0,
    hoverStar(star){
        if (this.disabled) {
            return;
        }

        this.stars = star; 
    },
    mouseLeftStar(){
        if (this.disabled) {
            return;
        }
    
        this.stars = this.value;
    },
    rate(star){
        if (this.disabled) {
            return;
        }

        this.stars = star;
        this.value = star;

        $refs.rated.classList.remove('opacity-0');
        setTimeout(function(){
            $refs.rated.classList.add('opacity-0');
        }, 2000);
    },
    reset(){
        if (this.disabled) {
            return;
        }

        this.value = 0;
        this.stars = 0;
    }
}" x-init="this.stars = this.value">
<div class="flex flex-col items-center max-w-6xl mx-auto jusitfy-center">
    <div x-ref="rated" class="absolute -mt-2 text-xs text-gray-400 duration-300 ease-out -translate-y-full opacity-0">Rated <span x-text="value"></span> Stars</div>
    <ul class="flex">
        <template x-for="star in max_stars">
            <li @mouseover="hoverStar(star)" @mouseleave="mouseLeftStar" @click="rate(star)" class="px-1 cursor-pointer" :class="{ 'text-gray-400 cursor-not-allowed': disabled}">
                <svg x-show="star > stars" class="w-6 h-6 text-gray-300 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z"/></svg>
                <svg x-show="star <= stars" class="w-6 h-6 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z"/></svg>
            </li>
        </template>
    </ul>
    <button @click="reset" class="inline-flex items-center px-2 py-1 mt-3 text-xs text-gray-600 bg-gray-200 rounded-full hover:bg-black hover:text-white">
        <svg class="w-3 h-3 mr-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><polyline points="24 56 24 104 72 104" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"/><path d="M67.59,192A88,88,0,1,0,65.77,65.77L24,104" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"/></svg>
        <span>Reset</span>
    </button>
</div>
</div>
Range Slider Retro Grid
A project by DevDojo