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 lsdfdfsdafd 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 -->
<div x-data="{ rating: 4 }" class="flex lsdfdfsdafd gap-2">
  <!-- check star 1 -->
  <div class="hover:text-orange-500">
    <input id="checki_01" class="hidden peer toggle-star" type="checkbox" name="checki_01" :checked="rating >= 1" @click="rating = 1">
    <label for="checki_01" class="peer-checked:text-orange-500 hover:cursor-pointer starfill">
      <span class="material-symbols-outlined">star</span>
    </label>
  </div>
  <!-- check star 2 -->
  <div class="hover:text-orange-500">
    <input id="checki_02" class="hidden peer toggle-star" type="checkbox" name="checki_02" :checked="rating >= 2" @click="rating = 2">
    <label for="checki_02" class="peer-checked:text-orange-500 hover:cursor-pointer starfill">
      <span class="material-symbols-outlined">star</span>
    </label>
  </div>
  <!-- check star 3 -->
  <div class="hover:text-orange-500">
    <input id="checki_03" class="hidden peer toggle-star" type="checkbox" name="checki_03" :checked="rating >= 3" @click="rating = 3">
    <label for="checki_03" class="peer-checked:text-orange-500 hover:cursor-pointer starfill">
      <span class="material-symbols-outlined">star</span>
    </label>
  </div>
  <!-- check star 4 -->
  <div class="hover:text-orange-500">
    <input id="checki_04" class="hidden peer toggle-star" type="checkbox" name="checki_04" :checked="rating >= 4" @click="rating = 4">
    <label for="checki_04" class="peer-checked:text-orange-500 hover:cursor-pointer starfill">
      <span class="material-symbols-outlined">star</span>
    </label>
  </div>
  <!-- check star 5 -->
  <div class="hover:text-orange-500">
    <input id="checki_05" class="hidden peer toggle-star" type="checkbox" name="checki_05" :checked="rating >= 5" @click="rating = 5">
    <label for="checki_05" class="peer-checked:text-orange-500 hover:cursor-pointer starfill">
      <span class="material-symbols-outlined">star</span>
    </label>
  </div>
</div>

<!-- rating love -->
<div x-data="{ rating: 3 }" class="flex lsdfdfsdafd gap-2">
  <!-- check love 1 -->
  <div class="hover:text-pink-500">
    <input id="checki_01" class="hidden peer toggle-star" type="checkbox" name="checki_01" :checked="rating >= 1" @click="rating = 1">
    <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 2 -->
  <div class="hover:text-pink-500">
    <input id="checki_02" class="hidden peer toggle-star" type="checkbox" name="checki_02" :checked="rating >= 2" @click="rating = 2">
    <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 3 -->
  <div class="hover:text-pink-500">
    <input id="checki_03" class="hidden peer toggle-star" type="checkbox" name="checki_03" :checked="rating >= 3" @click="rating = 3">
    <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 4 -->
  <div class="hover:text-pink-500">
    <input id="checki_04" class="hidden peer toggle-star" type="checkbox" name="checki_04" :checked="rating >= 4" @click="rating = 4">
    <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 5 -->
  <div class="hover:text-pink-500">
    <input id="checki_05" class="hidden peer toggle-star" type="checkbox" name="checki_05" :checked="rating >= 5" @click="rating = 5">
    <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 lsdfdfsdafd pdskdmsdnjw jkuthslatgh 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 pdskdmsdnjw jkuthslatgh dark:border-gray-400 peer-checked:text-pink-500 hover:cursor-pointer starfill">
    <span class="material-symbols-outlined">favorite</span>
  </label>
</div>