# 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 `.rating`and `.rating-label`classes 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 `.checked`class for `.rating-label`element.

    <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:
Reset

    <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:
Reset

    <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.
Contact Us
Buy Now

### Metronic Demos

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Coming soon
Coming soon

##### 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