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>
2024©
Keenthemes
