Logo Logo

Documentation v1.0.0

Preview
Light
Dark
System

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">
        <i class="ki-duotone ki-star fs-1"></i>
    </div>
    <div class="rating-label checked">
        <i class="ki-duotone ki-star fs-1"></i>
    </div>
    <div class="rating-label checked">
        <i class="ki-duotone ki-star fs-1"></i>
    </div>
    <div class="rating-label checked">
        <i class="ki-duotone ki-star fs-1"></i>
    </div>
    <div class="rating-label checked">
        <i class="ki-duotone ki-star fs-1"></i>
    </div>
</div>

Bootstrap 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">
        <i class="ki-duotone ki-star fs-1"></i>
    </div>
    <div class="rating-label checked">
        <i class="ki-duotone ki-star fs-1"></i>
    </div>
    <div class="rating-label checked">
        <i class="ki-duotone ki-star fs-1"></i>
    </div>
    <div class="rating-label">
        <i class="ki-duotone ki-star fs-1"></i>
    </div>
    <div class="rating-label">
        <i class="ki-duotone ki-star fs-1"></i>
    </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">
        <i class="ki-duotone ki-star fs-1"></i>
    </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">
        <i class="ki-duotone ki-star fs-1"></i>
    </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">
        <i class="ki-duotone ki-star fs-1"></i>
    </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">
        <i class="ki-duotone ki-star fs-1"></i>
    </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">
        <i class="ki-duotone ki-star fs-1"></i>
    </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">
        <i class="ki-duotone ki-star fs-1"></i>
    </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">
        <i class="ki-duotone ki-star fs-1"></i>
    </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">
        <i class="ki-duotone ki-star fs-1"></i>
    </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">
        <i class="ki-duotone ki-star fs-1"></i>
    </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">
        <i class="ki-duotone ki-star fs-1"></i>
    </label>
    <input class="rating-input" name="rating2" value="5" type="radio" id="kt_rating_2_input_5"/>
    <!--end::Star 5-->
</div>
try metronic buy mega bundle
Preview Get Help Buy Now