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 .
copy < 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 :
copy < 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.
copy < 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:
copy < div class = " 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" />
< 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" />
< 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" />
< 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" />
< 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" />
< 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" />
</ 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:
copy < div class = " 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" />
< 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" />
< 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" />
< 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" />
< 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" />
< 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" />
</ div>