Rating

Tailwind CSS and Alpine JS Rating

Ratings are a great way to collect feedback from users. They can be used to rate products, services, and more.

Default rating

A star rating using SVG icons and radio buttons.

HTML 
<div class="">
    <label for="oneStar" class="">
        <span class="">one star</span>
        <input id="oneStar" type="radio" class="" name="rating" value="1">
        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" fill="currentColor" class="">
            <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd">
        </svg>
    </label>

    <label for="twoStars" class="">
        <span class="">two stars</span>
        <input id="twoStars" type="radio" class="" name="rating" value="2">
        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" fill="currentColor" class="">
            <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd">
        </svg>
    </label>

    <label for="threeStars" class="">
        <span class="">three stars</span>
        <input id="threeStars" type="radio" class="" name="rating" value="3">
        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" fill="currentColor" class="">
            <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd">
        </svg>
    </label>

    <label for="fourStars" class="">
        <span class="">four stars</span>
        <input id="fourStars" type="radio" class="" name="rating" value="4">
        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" fill="currentColor" class="">
            <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd">
        </svg>
    </label>

    <label for="fiveStars" class="">
        <span class="">five stars</span>
        <input id="fiveStars" type="radio" class="" name="rating" value="5">
        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" fill="currentColor" class="">
            <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd">
        </svg>
    </label>
</div>

Emoji rating

A rating using emojies and radio buttons.

HTML 
<div class="">
    <label for="veryDissatisfied" class="">
        <span class="">very dissatisfied</span>
        <input id="veryDissatisfied" type="radio" class="" name="rating" value="1">
        <span class="">🥴</span>
    </label>

    <label for="dissatisfied" class="">
        <span class="">dissatisfied</span>
        <input id="dissatisfied" type="radio" class="" name="rating" value="2">
        <span class="">😕</span>
    </label>

    <label for="neutral" class="">
        <span class="">neutral</span>
        <input id="neutral" type="radio" class="" name="rating" value="3">
        <span class="">😐</span>
    </label>

    <label for="satisfied" class="">
        <span class="">satisfied</span>
        <input id="satisfied" type="radio" class="" name="rating" value="4">
        <span class="">😊</span>
    </label>

    <label for="verySatisfied" class="">
        <span class="">very satisfied</span>
        <input id="verySatisfied" type="radio" class="" name="rating" value="5">
        <span class="">😍</span>
    </label>
</div>

Data

List of all Alpine JS data used in this component.

Property Description
currentVal Current value of the rating

Keyboard Navigation

Key Action
Tab Rating selector gets the focus
Rating increases
Rating decreases