Rating

Creating a star rating or with a custom icon is quicker and easier using simple components. Icons and colors can be replaced with other models, can be adjusted to your needs.

Rating star

star star star star star
star star star star star_half
star star star star star

Rating checkbox

              
<!-- rating star -->
<div class="flex flex-row gap-2">
  <span class="material-symbols-outlined filled-icon text-orange-500">star</span>
  <span class="material-symbols-outlined filled-icon text-orange-500">star</span>
  <span class="material-symbols-outlined filled-icon text-orange-500">star</span>
  <span class="material-symbols-outlined filled-icon text-orange-500">star_half</span>
  <span class="material-symbols-outlined text-orange-500">star</span>
</div>

<!-- rating star checkbox -->
<div class="flex flex-row gap-2">
  <!-- check star -->
  <div class="hover:text-orange-500">
    <input id="check_01" class="hidden peer toggle-star" type="checkbox" name="check_01" checked>
    <label for="check_01" class="peer-checked:text-orange-500 hover:cursor-pointer  starfill">
      <span class="material-symbols-outlined">star</span>
    </label>
  </div>
  <!-- check star -->
  <div class="hover:text-orange-500">
    <input id="check_02" class="hidden peer toggle-star" type="checkbox" name="check_02" checked>
    <label for="check_02" class="peer-checked:text-orange-500 hover:cursor-pointer  starfill">
      <span class="material-symbols-outlined">star</span>
    </label>
  </div>
  <!-- check star -->
  <div class="hover:text-orange-500">
    <input id="check_03" class="hidden peer toggle-star" type="checkbox" name="check_03" checked>
    <label for="check_03" class="peer-checked:text-orange-500 hover:cursor-pointer  starfill">
      <span class="material-symbols-outlined">star</span>
    </label>
  </div>
  <!-- check star -->
  <div class="hover:text-orange-500">
    <input id="check_04" class="hidden peer toggle-star" type="checkbox" name="check_04" checked>
    <label for="check_04" class="peer-checked:text-orange-500 hover:cursor-pointer  starfill">
      <span class="material-symbols-outlined">star</span>
    </label>
  </div>
  <!-- check star -->
  <div class="hover:text-orange-500">
    <input id="check_05" class="hidden peer toggle-star" type="checkbox" name="check_05">
    <label for="check_05" class="peer-checked:text-orange-500 hover:cursor-pointer  starfill">
      <span class="material-symbols-outlined">star</span>
    </label>
  </div>
</div>

<!-- rating love checkbox -->
<div class="flex flex-row gap-2 mb-6">
  <!-- check love -->
  <div class="hover:text-pink-500">
    <input id="checki_01" class="hidden peer toggle-star" type="checkbox" name="checki_01" checked>
    <label for="checki_01" class="peer-checked:text-pink-500 hover:cursor-pointer  starfill">
      <span class="material-symbols-outlined">favorite</span>
    </label>
  </div>
  <!-- check love -->
  <div class="hover:text-pink-500">
    <input id="checki_02" class="hidden peer toggle-star" type="checkbox" name="checki_02" checked>
    <label for="checki_02" class="peer-checked:text-pink-500 hover:cursor-pointer  starfill">
      <span class="material-symbols-outlined">favorite</span>
    </label>
  </div>
  <!-- check love -->
  <div class="hover:text-pink-500">
    <input id="checki_03" class="hidden peer toggle-star" type="checkbox" name="checki_03" checked>
    <label for="checki_03" class="peer-checked:text-pink-500 hover:cursor-pointer  starfill">
      <span class="material-symbols-outlined">favorite</span>
    </label>
  </div>
  <!-- check love -->
  <div class="hover:text-pink-500">
    <input id="checki_04" class="hidden peer toggle-star" type="checkbox" name="checki_04" checked>
    <label for="checki_04" class="peer-checked:text-pink-500 hover:cursor-pointer  starfill">
      <span class="material-symbols-outlined">favorite</span>
    </label>
  </div>
  <!-- check love -->
  <div class="hover:text-pink-500">
    <input id="checki_05" class="hidden peer toggle-star" type="checkbox" name="checki_05">
    <label for="checki_05" class="peer-checked:text-pink-500 hover:cursor-pointer  starfill">
      <span class="material-symbols-outlined">favorite</span>
    </label>
  </div>
</div>

Rating custom checkbox

              
<!-- like -->
<label for="story_03" class="relative inline-flex flex-row items-center justify-center gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium hover:bg-surface-200 dark:hover:bg-surfacedark-200 hover-check [&_.starfill]:hover:text-pink-500 cursor-pointer">
  <input id="story_03" class="hidden peer toggle-star" type="checkbox" name="story_04">
  <span class="peer-checked:text-pink-500 leading-none hover:cursor-pointer starfill">
    <span class="material-symbols-outlined">thumb_up</span>
  </span>
  <span>1.2k</span><span class="hidden md:inline">Like</span>
</label>

<!-- favorite -->
<div aria-label="Add to favorite" data-microtip-position="top" role="tooltip" class="hover:text-pink-500">
  <input id="checkis" class="hidden peer toggle-star" type="checkbox" name="checki_05">
  <label for="checkis" class="p-2.5 rounded-[6.25rem] border border-gray-500 flex items-center justify-center dark:border-gray-400 peer-checked:text-pink-500 hover:cursor-pointer starfill">
    <span class="material-symbols-outlined">favorite</span>
  </label>
</div>