Documentation v8.0.38

Preview Downloads 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-bolder 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-bolder 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>

Explore

Metronic Licenses

License FAQs
Regular License
For single end product used by you or one client
$ 39
Extended License
For single SaaS app with paying users
$ 969
Custom License
Reach us for custom license offers.
Buy Now
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 & Videos
From guides and video tutorials, to live demos and code examples to get started.
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.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now