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:
<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>
2021©
Keenthemes
