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 Keenicons. 
          <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="ratingInput0">
    Reset
  </label>
  <input class="rating-input" name="rating" value="0" checked type="radio" id="ratingInput0"/>
  <!--end::Reset rating-->

  <!--begin::Star 1-->
  <label class="rating-label" for="ratingInput1">
    <i class="ki-duotone ki-star fs-1"></i>
  </label>
  <input class="rating-input" name="rating" value="1" type="radio" id="ratingInput1"/>
  <!--end::Star 1-->

  <!--begin::Star 2-->
  <label class="rating-label" for="ratingInput2">
    <i class="ki-duotone ki-star fs-1"></i>
  </label>
  <input class="rating-input" name="rating" value="2" type="radio" id="ratingInput2"/>
  <!--end::Star 2-->

  <!--begin::Star 3-->
  <label class="rating-label" for="ratingInput3">
    <i class="ki-duotone ki-star fs-1"></i>
  </label>
  <input class="rating-input" name="rating" value="3" type="radio" id="ratingInput3"/>
  <!--end::Star 3-->

  <!--begin::Star 4-->
  <label class="rating-label" for="ratingInput4">
    <i class="ki-duotone ki-star fs-1"></i>
  </label>
  <input class="rating-input" name="rating" value="4" type="radio" id="ratingInput4"/>
  <!--end::Star 4-->

  <!--begin::Star 5-->
  <label class="rating-label" for="ratingInput5">
    <i class="ki-duotone ki-star fs-1"></i>
  </label>
  <input class="rating-input" name="rating" value="5" type="radio" id="ratingInput5"/>
  <!--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="rating2input0">
    Reset
  </label>
  <input class="rating-input" name="rating2" value="0" checked type="radio" id="rating2input0"/>
  <!--end::Reset rating-->

  <!--begin::Star 1-->
  <label class="rating-label" for="rating2input1">
    <i class="ki-duotone ki-star fs-1"></i>
  </label>
  <input class="rating-input" name="rating2" value="1" type="radio" id="rating2input1"/>
  <!--end::Star 1-->

  <!--begin::Star 2-->
  <label class="rating-label" for="rating2input2">
    <i class="ki-duotone ki-star fs-1"></i>
  </label>
  <input class="rating-input" name="rating2" value="2" type="radio" id="rating2input2"/>
  <!--end::Star 2-->

  <!--begin::Star 3-->
  <label class="rating-label" for="rating2input3">
    <i class="ki-duotone ki-star fs-1"></i>
  </label>
  <input class="rating-input" name="rating2" value="3" type="radio" checked="checked" id="rating2input3"/>
  <!--end::Star 3-->

  <!--begin::Star 4-->
  <label class="rating-label" for="rating2input4">
    <i class="ki-duotone ki-star fs-1"></i>
  </label>
  <input class="rating-input" name="rating2" value="4" type="radio" id="rating2input4"/>
  <!--end::Star 4-->

  <!--begin::Star 5-->
  <label class="rating-label" for="rating2input5">
    <i class="ki-duotone ki-star fs-1"></i>
  </label>
  <input class="rating-input" name="rating2" value="5" type="radio" id="rating2input5"/>
  <!--end::Star 5-->
</div>