Documentation v1.1.0

Preview Purchase

Overview

Rating is a custom component that can be used to display and edit star based rating.

Basic

Use .ratingand .rating-labelclasses for displaying star based ratings. This examples uses a star icon from Duotune Svg Icons.
<div class="rating">
    <div class="rating-label checked">
        <span class="svg-icon"><svg>....</svg></span>
    </div>
    <div class="rating-label checked">
        <span class="svg-icon"><svg>....</svg></span>
    </div>
    <div class="rating-label checked">
        <span class="svg-icon"><svg>....</svg></span>
    </div>
    <div class="rating-label checked">
        <span class="svg-icon"><svg>....</svg></span>
    </div>
    <div class="rating-label checked">
        <span class="svg-icon"><svg>....</svg></span>
    </div>
</div>

Font Icons

As a star icon any font icons can be used as well. This examples uses a star icon from Bootstrap Icons:
<div class="rating">
    <div class="rating-label me-2 checked">
        <i class="bi bi-star fs-1"></i>
    </div>
    <div class="rating-label me-2 checked">
        <i class="bi bi-star fs-1"></i>
    </div>
    <div class="rating-label me-2 checked">
        <i class="bi bi-star fs-1"></i>
    </div>
    <div class="rating-label me-2 checked">
        <i class="bi bi-star fs-1"></i>
    </div>
    <div class="rating-label me-2 checked">
        <i class="bi bi-star fs-1"></i>
    </div>
</div>

Star States

By default each star's state is unchecked and to mark them as checked just use .checkedclass for .rating-labelelement.
<div class="rating">
    <div class="rating-label checked">
        <span class="svg-icon"><svg>....</svg></span>
    </div>
    <div class="rating-label checked">
        <span class="svg-icon"><svg>....</svg></span>
    </div>
    <div class="rating-label checked">
        <span class="svg-icon"><svg>....</svg></span>
    </div>
    <div class="rating-label">
        <span class="svg-icon"><svg>....</svg></span>
    </div>
    <div class="rating-label">
        <span class="svg-icon"><svg>....</svg></span>
    </div>
</div>

<div class="rating">
    <div class="rating-label me-2 checked">
        <i class="bi bi-star fs-2"></i>
    </div>
    <div class="rating-label me-2 checked">
        <i class="bi bi-star fs-2"></i>
    </div>
    <div class="rating-label me-2 checked">
        <i class="bi bi-star fs-2"></i>
    </div>
    <div class="rating-label me-2">
        <i class="bi bi-star fs-2"></i>
    </div>
    <div class="rating-label me-2">
        <i class="bi bi-star fs-2"></i>
    </div>
</div>

Edit Mode

Enable editable rating with Label and Radio input elements. Hover and click on the below rating to set a rating value that can be submitted along with attached radio inputs:
<div class="rating">
    <!--begin::Reset rating-->
    <label class="btn btn-light fw-bold btn-sm rating-label me-3" for="kt_rating_input_0">
        Reset
    </label>
    <input class="rating-input" name="rating" value="0" checked type="radio" id="kt_rating_input_0"/>
    <!--end::Reset rating-->

    <!--begin::Star 1-->
    <label class="rating-label" for="kt_rating_input_1">
        <span class="svg-icon svg-icon-1"><svg>....</svg></span>
    </label>
    <input class="rating-input" name="rating" value="1" type="radio" id="kt_rating_input_1"/>
    <!--end::Star 1-->

    <!--begin::Star 2-->
    <label class="rating-label" for="kt_rating_input_2">
        <span class="svg-icon svg-icon-1"><svg>....</svg></span>
    </label>
    <input class="rating-input" name="rating" value="2" type="radio" id="kt_rating_input_2"/>
    <!--end::Star 2-->

    <!--begin::Star 3-->
    <label class="rating-label" for="kt_rating_input_3">
        <span class="svg-icon svg-icon-1"><svg>....</svg></span>
    </label>
    <input class="rating-input" name="rating" value="3" type="radio" id="kt_rating_input_3"/>
    <!--end::Star 3-->

    <!--begin::Star 4-->
    <label class="rating-label" for="kt_rating_input_4">
        <span class="svg-icon svg-icon-1"><svg>....</svg></span>
    </label>
    <input class="rating-input" name="rating" value="4" type="radio" id="kt_rating_input_4"/>
    <!--end::Star 4-->

    <!--begin::Star 5-->
    <label class="rating-label" for="kt_rating_input_5">
        <span class="svg-icon svg-icon-1"><svg>....</svg></span>
    </label>
    <input class="rating-input" name="rating" value="5" type="radio" id="kt_rating_input_5"/>
    <!--end::Star 5-->
</div>
Rating with default value can be setup through a radio input's checked="checked"state. This examples shows a rating with 3 stars default value:
<div class="rating">
    <!--begin::Reset rating-->
    <label class="btn btn-light fw-bold btn-sm rating-label me-3" for="kt_rating_2_input_0">
        Reset
    </label>
    <input class="rating-input" name="rating2" value="0" checked type="radio" id="kt_rating_2_input_0"/>
    <!--end::Reset rating-->

    <!--begin::Star 1-->
    <label class="rating-label" for="kt_rating_2_input_1">
        <span class="svg-icon svg-icon-1"><svg>....</svg></span>
    </label>
    <input class="rating-input" name="rating2" value="1" type="radio" id="kt_rating_2_input_1"/>
    <!--end::Star 1-->

    <!--begin::Star 2-->
    <label class="rating-label" for="kt_rating_2_input_2">
        <span class="svg-icon svg-icon-1"><svg>....</svg></span>
    </label>
    <input class="rating-input" name="rating2" value="2" type="radio" id="kt_rating_2_input_2"/>
    <!--end::Star 2-->

    <!--begin::Star 3-->
    <label class="rating-label" for="kt_rating_2_input_3">
        <span class="svg-icon svg-icon-1"><svg>....</svg></span>
    </label>
    <input class="rating-input" name="rating2" value="3" type="radio" checked="checked" id="kt_rating_2_input_3"/>
    <!--end::Star 3-->

    <!--begin::Star 4-->
    <label class="rating-label" for="kt_rating_2_input_4">
        <span class="svg-icon svg-icon-1"><svg>....</svg></span>
    </label>
    <input class="rating-input" name="rating2" value="4" type="radio" id="kt_rating_2_input_4"/>
    <!--end::Star 4-->

    <!--begin::Star 5-->
    <label class="rating-label" for="kt_rating_2_input_5">
        <span class="svg-icon svg-icon-1"><svg>....</svg></span>
    </label>
    <input class="rating-input" name="rating2" value="5" type="radio" id="kt_rating_2_input_5"/>
    <!--end::Star 5-->
</div>
Learn & Get Inspired

Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation
From guides and how-tos, to live demos and code examples to get started right away.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now