# 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

star
star
star
star
star
favorite
favorite
favorite
favorite
favorite

    <!-- 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

thumb_up 1.2k Like
favorite

    <!-- 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>

### Search

## Theme Settings

### Light & Dark

### Theme Colors

### Layouts