Documentation v8.0.25

Preview Purchase

Overview

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

Basic Example

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 Example

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 Examples

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>