Rating
daisyUI 5 rating (mask + radio) wrapper. star / heart / circle shapes, half-star support (half=true), readonly. Ensure unique name per demo to keep radio groups separate.
Basic
Copy
Copied
<x-rating name="review" :value="4" />
<div class="pn-rating inline-flex items-center">
<input type="radio" name="review" class="pn-rating-hidden appearance-none cursor-pointer opacity-0 w-2 flex-none" aria-label="No rating">
<input type="radio" name="review" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="1 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="review" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="2 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="review" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="3 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="review" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" checked aria-label="4 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="review" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="5 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
</div>
value — 0 / 1 / 2 / 3 / 4 / 5
Copy
Copied
<x-rating name="rating-value-0" :value="0" />
<x-rating name="rating-value-1" :value="1" />
<x-rating name="rating-value-2" :value="2" />
<x-rating name="rating-value-3" :value="3" />
<x-rating name="rating-value-4" :value="4" />
<x-rating name="rating-value-5" :value="5" />
<div class="pn-rating inline-flex items-center">
<input type="radio" name="rating-value-0" class="pn-rating-hidden appearance-none cursor-pointer opacity-0 w-2 flex-none" checked aria-label="No rating">
<input type="radio" name="rating-value-0" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="1 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-value-0" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="2 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-value-0" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="3 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-value-0" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="4 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-value-0" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="5 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
</div>
<div class="pn-rating inline-flex items-center">
<input type="radio" name="rating-value-1" class="pn-rating-hidden appearance-none cursor-pointer opacity-0 w-2 flex-none" aria-label="No rating">
<input type="radio" name="rating-value-1" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" checked aria-label="1 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-value-1" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="2 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-value-1" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="3 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-value-1" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="4 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-value-1" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="5 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
</div>
<div class="pn-rating inline-flex items-center">
<input type="radio" name="rating-value-2" class="pn-rating-hidden appearance-none cursor-pointer opacity-0 w-2 flex-none" aria-label="No rating">
<input type="radio" name="rating-value-2" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="1 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-value-2" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" checked aria-label="2 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-value-2" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="3 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-value-2" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="4 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-value-2" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="5 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
</div>
<div class="pn-rating inline-flex items-center">
<input type="radio" name="rating-value-3" class="pn-rating-hidden appearance-none cursor-pointer opacity-0 w-2 flex-none" aria-label="No rating">
<input type="radio" name="rating-value-3" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="1 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-value-3" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="2 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-value-3" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" checked aria-label="3 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-value-3" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="4 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-value-3" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="5 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
</div>
<div class="pn-rating inline-flex items-center">
<input type="radio" name="rating-value-4" class="pn-rating-hidden appearance-none cursor-pointer opacity-0 w-2 flex-none" aria-label="No rating">
<input type="radio" name="rating-value-4" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="1 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-value-4" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="2 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-value-4" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="3 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-value-4" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" checked aria-label="4 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-value-4" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="5 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
</div>
<div class="pn-rating inline-flex items-center">
<input type="radio" name="rating-value-5" class="pn-rating-hidden appearance-none cursor-pointer opacity-0 w-2 flex-none" aria-label="No rating">
<input type="radio" name="rating-value-5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="1 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-value-5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="2 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-value-5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="3 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-value-5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="4 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-value-5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" checked aria-label="5 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
</div>
size — xs / sm / md (default) / lg / xl
Copy
Copied
<x-rating name="rating-size-xs" size="xs" :value="3" />
<x-rating name="rating-size-sm" size="sm" :value="3" />
<x-rating name="rating-size-md" size="md" :value="3" />
<x-rating name="rating-size-lg" size="lg" :value="3" />
<x-rating name="rating-size-xl" size="xl" :value="3" />
<div class="pn-rating inline-flex items-center">
<input type="radio" name="rating-size-xs" class="pn-rating-hidden appearance-none cursor-pointer opacity-0 w-2 flex-none" aria-label="No rating">
<input type="radio" name="rating-size-xs" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-4 h-4" aria-label="1 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-4 h-4 -ml-4" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-size-xs" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-4 h-4" aria-label="2 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-4 h-4 -ml-4" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-size-xs" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-4 h-4" checked aria-label="3 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-4 h-4 -ml-4" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-size-xs" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-4 h-4" aria-label="4 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-4 h-4 -ml-4" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-size-xs" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-4 h-4" aria-label="5 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-4 h-4 -ml-4" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
</div>
<div class="pn-rating inline-flex items-center">
<input type="radio" name="rating-size-sm" class="pn-rating-hidden appearance-none cursor-pointer opacity-0 w-2 flex-none" aria-label="No rating">
<input type="radio" name="rating-size-sm" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-5 h-5" aria-label="1 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-5 h-5 -ml-5" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-size-sm" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-5 h-5" aria-label="2 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-5 h-5 -ml-5" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-size-sm" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-5 h-5" checked aria-label="3 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-5 h-5 -ml-5" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-size-sm" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-5 h-5" aria-label="4 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-5 h-5 -ml-5" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-size-sm" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-5 h-5" aria-label="5 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-5 h-5 -ml-5" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
</div>
<div class="pn-rating inline-flex items-center">
<input type="radio" name="rating-size-md" class="pn-rating-hidden appearance-none cursor-pointer opacity-0 w-2 flex-none" aria-label="No rating">
<input type="radio" name="rating-size-md" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="1 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-size-md" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="2 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-size-md" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" checked aria-label="3 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-size-md" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="4 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-size-md" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="5 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
</div>
<div class="pn-rating inline-flex items-center">
<input type="radio" name="rating-size-lg" class="pn-rating-hidden appearance-none cursor-pointer opacity-0 w-2 flex-none" aria-label="No rating">
<input type="radio" name="rating-size-lg" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-7 h-7" aria-label="1 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-7 h-7 -ml-7" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-size-lg" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-7 h-7" aria-label="2 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-7 h-7 -ml-7" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-size-lg" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-7 h-7" checked aria-label="3 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-7 h-7 -ml-7" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-size-lg" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-7 h-7" aria-label="4 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-7 h-7 -ml-7" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-size-lg" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-7 h-7" aria-label="5 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-7 h-7 -ml-7" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
</div>
<div class="pn-rating inline-flex items-center">
<input type="radio" name="rating-size-xl" class="pn-rating-hidden appearance-none cursor-pointer opacity-0 w-2 flex-none" aria-label="No rating">
<input type="radio" name="rating-size-xl" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-8 h-8" aria-label="1 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-8 h-8 -ml-8" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-size-xl" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-8 h-8" aria-label="2 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-8 h-8 -ml-8" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-size-xl" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-8 h-8" checked aria-label="3 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-8 h-8 -ml-8" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-size-xl" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-8 h-8" aria-label="4 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-8 h-8 -ml-8" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-size-xl" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-8 h-8" aria-label="5 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-8 h-8 -ml-8" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
</div>
color — warning (default) / primary / secondary / accent / info / success / error
Copy
Copied
<x-rating name="rating-color-warning" color="warning" :value="4" />
<x-rating name="rating-color-primary" color="primary" :value="4" />
<x-rating name="rating-color-secondary" color="secondary" :value="4" />
<x-rating name="rating-color-accent" color="accent" :value="4" />
<x-rating name="rating-color-info" color="info" :value="4" />
<x-rating name="rating-color-success" color="success" :value="4" />
<x-rating name="rating-color-error" color="error" :value="4" />
<div class="pn-rating inline-flex items-center">
<input type="radio" name="rating-color-warning" class="pn-rating-hidden appearance-none cursor-pointer opacity-0 w-2 flex-none" aria-label="No rating">
<input type="radio" name="rating-color-warning" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="1 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-color-warning" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="2 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-color-warning" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="3 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-color-warning" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" checked aria-label="4 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-color-warning" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="5 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
</div>
<div class="pn-rating inline-flex items-center">
<input type="radio" name="rating-color-primary" class="pn-rating-hidden appearance-none cursor-pointer opacity-0 w-2 flex-none" aria-label="No rating">
<input type="radio" name="rating-color-primary" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="1 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-primary w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-color-primary" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="2 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-primary w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-color-primary" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="3 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-primary w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-color-primary" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" checked aria-label="4 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-primary w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-color-primary" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="5 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-primary w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
</div>
<div class="pn-rating inline-flex items-center">
<input type="radio" name="rating-color-secondary" class="pn-rating-hidden appearance-none cursor-pointer opacity-0 w-2 flex-none" aria-label="No rating">
<input type="radio" name="rating-color-secondary" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="1 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-secondary w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-color-secondary" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="2 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-secondary w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-color-secondary" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="3 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-secondary w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-color-secondary" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" checked aria-label="4 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-secondary w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-color-secondary" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="5 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-secondary w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
</div>
<div class="pn-rating inline-flex items-center">
<input type="radio" name="rating-color-accent" class="pn-rating-hidden appearance-none cursor-pointer opacity-0 w-2 flex-none" aria-label="No rating">
<input type="radio" name="rating-color-accent" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="1 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-accent w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-color-accent" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="2 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-accent w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-color-accent" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="3 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-accent w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-color-accent" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" checked aria-label="4 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-accent w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-color-accent" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="5 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-accent w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
</div>
<div class="pn-rating inline-flex items-center">
<input type="radio" name="rating-color-info" class="pn-rating-hidden appearance-none cursor-pointer opacity-0 w-2 flex-none" aria-label="No rating">
<input type="radio" name="rating-color-info" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="1 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-info w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-color-info" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="2 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-info w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-color-info" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="3 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-info w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-color-info" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" checked aria-label="4 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-info w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-color-info" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="5 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-info w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
</div>
<div class="pn-rating inline-flex items-center">
<input type="radio" name="rating-color-success" class="pn-rating-hidden appearance-none cursor-pointer opacity-0 w-2 flex-none" aria-label="No rating">
<input type="radio" name="rating-color-success" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="1 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-success w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-color-success" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="2 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-success w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-color-success" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="3 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-success w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-color-success" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" checked aria-label="4 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-success w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-color-success" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="5 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-success w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
</div>
<div class="pn-rating inline-flex items-center">
<input type="radio" name="rating-color-error" class="pn-rating-hidden appearance-none cursor-pointer opacity-0 w-2 flex-none" aria-label="No rating">
<input type="radio" name="rating-color-error" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="1 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-error w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-color-error" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="2 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-error w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-color-error" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="3 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-error w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-color-error" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" checked aria-label="4 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-error w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-color-error" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="5 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-error w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
</div>
Half stars (0.5 steps)
Copy
Copied
<x-rating name="rating-half-2_5" :value="2.5" :half="true" />
<x-rating name="rating-half-3_5" :value="3.5" :half="true" />
<x-rating name="rating-half-4_5" :value="4.5" :half="true" />
<div class="pn-rating inline-flex items-center">
<input type="radio" name="rating-half-2_5" class="pn-rating-hidden appearance-none cursor-pointer opacity-0 w-2 flex-none" aria-label="No rating">
<input type="radio" name="rating-half-2_5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3 h-6" aria-label="0.5 star">
<svg data-pn-star="" viewbox="0 0 96 180" class="pn-rating-star flex-none fill-warning w-3 h-6 -ml-3" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-half-2_5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3 h-6" aria-label="1 star">
<svg data-pn-star="" viewbox="96 0 96 180" class="pn-rating-star flex-none fill-warning w-3 h-6 -ml-3" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-half-2_5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3 h-6" aria-label="1.5 star">
<svg data-pn-star="" viewbox="0 0 96 180" class="pn-rating-star flex-none fill-warning w-3 h-6 -ml-3" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-half-2_5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3 h-6" aria-label="2 star">
<svg data-pn-star="" viewbox="96 0 96 180" class="pn-rating-star flex-none fill-warning w-3 h-6 -ml-3" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-half-2_5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3 h-6" checked aria-label="2.5 star">
<svg data-pn-star="" viewbox="0 0 96 180" class="pn-rating-star flex-none fill-warning w-3 h-6 -ml-3" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-half-2_5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3 h-6" aria-label="3 star">
<svg data-pn-star="" viewbox="96 0 96 180" class="pn-rating-star flex-none fill-warning w-3 h-6 -ml-3" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-half-2_5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3 h-6" aria-label="3.5 star">
<svg data-pn-star="" viewbox="0 0 96 180" class="pn-rating-star flex-none fill-warning w-3 h-6 -ml-3" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-half-2_5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3 h-6" aria-label="4 star">
<svg data-pn-star="" viewbox="96 0 96 180" class="pn-rating-star flex-none fill-warning w-3 h-6 -ml-3" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-half-2_5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3 h-6" aria-label="4.5 star">
<svg data-pn-star="" viewbox="0 0 96 180" class="pn-rating-star flex-none fill-warning w-3 h-6 -ml-3" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-half-2_5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3 h-6" aria-label="5 star">
<svg data-pn-star="" viewbox="96 0 96 180" class="pn-rating-star flex-none fill-warning w-3 h-6 -ml-3" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
</div>
<div class="pn-rating inline-flex items-center">
<input type="radio" name="rating-half-3_5" class="pn-rating-hidden appearance-none cursor-pointer opacity-0 w-2 flex-none" aria-label="No rating">
<input type="radio" name="rating-half-3_5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3 h-6" aria-label="0.5 star">
<svg data-pn-star="" viewbox="0 0 96 180" class="pn-rating-star flex-none fill-warning w-3 h-6 -ml-3" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-half-3_5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3 h-6" aria-label="1 star">
<svg data-pn-star="" viewbox="96 0 96 180" class="pn-rating-star flex-none fill-warning w-3 h-6 -ml-3" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-half-3_5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3 h-6" aria-label="1.5 star">
<svg data-pn-star="" viewbox="0 0 96 180" class="pn-rating-star flex-none fill-warning w-3 h-6 -ml-3" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-half-3_5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3 h-6" aria-label="2 star">
<svg data-pn-star="" viewbox="96 0 96 180" class="pn-rating-star flex-none fill-warning w-3 h-6 -ml-3" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-half-3_5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3 h-6" aria-label="2.5 star">
<svg data-pn-star="" viewbox="0 0 96 180" class="pn-rating-star flex-none fill-warning w-3 h-6 -ml-3" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-half-3_5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3 h-6" aria-label="3 star">
<svg data-pn-star="" viewbox="96 0 96 180" class="pn-rating-star flex-none fill-warning w-3 h-6 -ml-3" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-half-3_5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3 h-6" checked aria-label="3.5 star">
<svg data-pn-star="" viewbox="0 0 96 180" class="pn-rating-star flex-none fill-warning w-3 h-6 -ml-3" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-half-3_5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3 h-6" aria-label="4 star">
<svg data-pn-star="" viewbox="96 0 96 180" class="pn-rating-star flex-none fill-warning w-3 h-6 -ml-3" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-half-3_5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3 h-6" aria-label="4.5 star">
<svg data-pn-star="" viewbox="0 0 96 180" class="pn-rating-star flex-none fill-warning w-3 h-6 -ml-3" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-half-3_5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3 h-6" aria-label="5 star">
<svg data-pn-star="" viewbox="96 0 96 180" class="pn-rating-star flex-none fill-warning w-3 h-6 -ml-3" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
</div>
<div class="pn-rating inline-flex items-center">
<input type="radio" name="rating-half-4_5" class="pn-rating-hidden appearance-none cursor-pointer opacity-0 w-2 flex-none" aria-label="No rating">
<input type="radio" name="rating-half-4_5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3 h-6" aria-label="0.5 star">
<svg data-pn-star="" viewbox="0 0 96 180" class="pn-rating-star flex-none fill-warning w-3 h-6 -ml-3" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-half-4_5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3 h-6" aria-label="1 star">
<svg data-pn-star="" viewbox="96 0 96 180" class="pn-rating-star flex-none fill-warning w-3 h-6 -ml-3" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-half-4_5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3 h-6" aria-label="1.5 star">
<svg data-pn-star="" viewbox="0 0 96 180" class="pn-rating-star flex-none fill-warning w-3 h-6 -ml-3" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-half-4_5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3 h-6" aria-label="2 star">
<svg data-pn-star="" viewbox="96 0 96 180" class="pn-rating-star flex-none fill-warning w-3 h-6 -ml-3" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-half-4_5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3 h-6" aria-label="2.5 star">
<svg data-pn-star="" viewbox="0 0 96 180" class="pn-rating-star flex-none fill-warning w-3 h-6 -ml-3" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-half-4_5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3 h-6" aria-label="3 star">
<svg data-pn-star="" viewbox="96 0 96 180" class="pn-rating-star flex-none fill-warning w-3 h-6 -ml-3" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-half-4_5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3 h-6" aria-label="3.5 star">
<svg data-pn-star="" viewbox="0 0 96 180" class="pn-rating-star flex-none fill-warning w-3 h-6 -ml-3" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-half-4_5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3 h-6" aria-label="4 star">
<svg data-pn-star="" viewbox="96 0 96 180" class="pn-rating-star flex-none fill-warning w-3 h-6 -ml-3" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-half-4_5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3 h-6" checked aria-label="4.5 star">
<svg data-pn-star="" viewbox="0 0 96 180" class="pn-rating-star flex-none fill-warning w-3 h-6 -ml-3" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-half-4_5" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3 h-6" aria-label="5 star">
<svg data-pn-star="" viewbox="96 0 96 180" class="pn-rating-star flex-none fill-warning w-3 h-6 -ml-3" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
</div>
Changing the shape
Copy
Copied
<x-rating name="rating-shape-star" shape="star" color="warning" :value="3" />
<x-rating name="rating-shape-heart" shape="heart" color="error" :value="3" />
<x-rating name="rating-shape-circle" shape="circle" color="primary" :value="3" />
<div class="pn-rating inline-flex items-center">
<input type="radio" name="rating-shape-star" class="pn-rating-hidden appearance-none cursor-pointer opacity-0 w-2 flex-none" aria-label="No rating">
<input type="radio" name="rating-shape-star" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="1 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-shape-star" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="2 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-shape-star" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" checked aria-label="3 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-shape-star" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="4 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-shape-star" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="5 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
</div>
<div class="pn-rating inline-flex items-center">
<input type="radio" name="rating-shape-heart" class="pn-rating-hidden appearance-none cursor-pointer opacity-0 w-2 flex-none" aria-label="No rating">
<input type="radio" name="rating-shape-heart" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="1 star">
<svg data-pn-star="" viewbox="0 0 200 185" class="pn-rating-star flex-none fill-error w-6 h-6 -ml-6" aria-hidden="true">
<path d="M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z" fill-rule="nonzero"></path></svg>
<input type="radio" name="rating-shape-heart" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="2 star">
<svg data-pn-star="" viewbox="0 0 200 185" class="pn-rating-star flex-none fill-error w-6 h-6 -ml-6" aria-hidden="true">
<path d="M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z" fill-rule="nonzero"></path></svg>
<input type="radio" name="rating-shape-heart" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" checked aria-label="3 star">
<svg data-pn-star="" viewbox="0 0 200 185" class="pn-rating-star flex-none fill-error w-6 h-6 -ml-6" aria-hidden="true">
<path d="M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z" fill-rule="nonzero"></path></svg>
<input type="radio" name="rating-shape-heart" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="4 star">
<svg data-pn-star="" viewbox="0 0 200 185" class="pn-rating-star flex-none fill-error w-6 h-6 -ml-6" aria-hidden="true">
<path d="M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z" fill-rule="nonzero"></path></svg>
<input type="radio" name="rating-shape-heart" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="5 star">
<svg data-pn-star="" viewbox="0 0 200 185" class="pn-rating-star flex-none fill-error w-6 h-6 -ml-6" aria-hidden="true">
<path d="M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z" fill-rule="nonzero"></path></svg>
</div>
<div class="pn-rating inline-flex items-center">
<input type="radio" name="rating-shape-circle" class="pn-rating-hidden appearance-none cursor-pointer opacity-0 w-2 flex-none" aria-label="No rating">
<input type="radio" name="rating-shape-circle" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="1 star">
<svg data-pn-star="" viewbox="0 0 200 200" class="pn-rating-star flex-none fill-primary w-6 h-6 -ml-6" aria-hidden="true">
<circle cx="100" cy="100" r="100"></circle></svg>
<input type="radio" name="rating-shape-circle" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="2 star">
<svg data-pn-star="" viewbox="0 0 200 200" class="pn-rating-star flex-none fill-primary w-6 h-6 -ml-6" aria-hidden="true">
<circle cx="100" cy="100" r="100"></circle></svg>
<input type="radio" name="rating-shape-circle" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" checked aria-label="3 star">
<svg data-pn-star="" viewbox="0 0 200 200" class="pn-rating-star flex-none fill-primary w-6 h-6 -ml-6" aria-hidden="true">
<circle cx="100" cy="100" r="100"></circle></svg>
<input type="radio" name="rating-shape-circle" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="4 star">
<svg data-pn-star="" viewbox="0 0 200 200" class="pn-rating-star flex-none fill-primary w-6 h-6 -ml-6" aria-hidden="true">
<circle cx="100" cy="100" r="100"></circle></svg>
<input type="radio" name="rating-shape-circle" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="5 star">
<svg data-pn-star="" viewbox="0 0 200 200" class="pn-rating-star flex-none fill-primary w-6 h-6 -ml-6" aria-hidden="true">
<circle cx="100" cy="100" r="100"></circle></svg>
</div>
Display-only
Copy
Copied
<x-rating name="rating-readonly" :value="4" :readonly="true" />
<div class="pn-rating inline-flex items-center">
<input type="radio" name="rating-readonly" class="pn-rating-hidden appearance-none cursor-pointer opacity-0 w-2 flex-none" disabled aria-label="No rating">
<input type="radio" name="rating-readonly" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" disabled aria-label="1 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-readonly" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" disabled aria-label="2 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-readonly" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" disabled aria-label="3 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-readonly" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" checked disabled aria-label="4 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-readonly" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" disabled aria-label="5 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
</div>
Changing max
Copy
Copied
<x-rating name="rating-ten" :max="10" :value="7" />
<div class="pn-rating inline-flex items-center">
<input type="radio" name="rating-ten" class="pn-rating-hidden appearance-none cursor-pointer opacity-0 w-2 flex-none" aria-label="No rating">
<input type="radio" name="rating-ten" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="1 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-ten" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="2 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-ten" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="3 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-ten" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="4 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-ten" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="5 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-ten" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="6 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-ten" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" checked aria-label="7 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-ten" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="8 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-ten" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="9 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
<input type="radio" name="rating-ten" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-6 h-6" aria-label="10 star">
<svg data-pn-star="" viewbox="0 0 192 180" class="pn-rating-star flex-none fill-warning w-6 h-6 -ml-6" aria-hidden="true">
<path d="m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z" fill-rule="evenodd"></path></svg>
</div>
combination — heart + lg + half (value=3.5)
Copy
Copied
<x-rating
name="rating-combo"
shape="heart"
size="lg"
color="error"
:value="3.5"
:half="true"
/>
<div class="pn-rating inline-flex items-center">
<input type="radio" name="rating-combo" class="pn-rating-hidden appearance-none cursor-pointer opacity-0 w-2 flex-none" aria-label="No rating">
<input type="radio" name="rating-combo" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3.5 h-7" aria-label="0.5 star">
<svg data-pn-star="" viewbox="0 0 100 185" class="pn-rating-star flex-none fill-error w-3.5 h-7 -ml-3.5" aria-hidden="true">
<path d="M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z" fill-rule="nonzero"></path></svg>
<input type="radio" name="rating-combo" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3.5 h-7" aria-label="1 star">
<svg data-pn-star="" viewbox="100 0 100 185" class="pn-rating-star flex-none fill-error w-3.5 h-7 -ml-3.5" aria-hidden="true">
<path d="M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z" fill-rule="nonzero"></path></svg>
<input type="radio" name="rating-combo" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3.5 h-7" aria-label="1.5 star">
<svg data-pn-star="" viewbox="0 0 100 185" class="pn-rating-star flex-none fill-error w-3.5 h-7 -ml-3.5" aria-hidden="true">
<path d="M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z" fill-rule="nonzero"></path></svg>
<input type="radio" name="rating-combo" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3.5 h-7" aria-label="2 star">
<svg data-pn-star="" viewbox="100 0 100 185" class="pn-rating-star flex-none fill-error w-3.5 h-7 -ml-3.5" aria-hidden="true">
<path d="M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z" fill-rule="nonzero"></path></svg>
<input type="radio" name="rating-combo" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3.5 h-7" aria-label="2.5 star">
<svg data-pn-star="" viewbox="0 0 100 185" class="pn-rating-star flex-none fill-error w-3.5 h-7 -ml-3.5" aria-hidden="true">
<path d="M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z" fill-rule="nonzero"></path></svg>
<input type="radio" name="rating-combo" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3.5 h-7" aria-label="3 star">
<svg data-pn-star="" viewbox="100 0 100 185" class="pn-rating-star flex-none fill-error w-3.5 h-7 -ml-3.5" aria-hidden="true">
<path d="M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z" fill-rule="nonzero"></path></svg>
<input type="radio" name="rating-combo" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3.5 h-7" checked aria-label="3.5 star">
<svg data-pn-star="" viewbox="0 0 100 185" class="pn-rating-star flex-none fill-error w-3.5 h-7 -ml-3.5" aria-hidden="true">
<path d="M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z" fill-rule="nonzero"></path></svg>
<input type="radio" name="rating-combo" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3.5 h-7" aria-label="4 star">
<svg data-pn-star="" viewbox="100 0 100 185" class="pn-rating-star flex-none fill-error w-3.5 h-7 -ml-3.5" aria-hidden="true">
<path d="M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z" fill-rule="nonzero"></path></svg>
<input type="radio" name="rating-combo" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3.5 h-7" aria-label="4.5 star">
<svg data-pn-star="" viewbox="0 0 100 185" class="pn-rating-star flex-none fill-error w-3.5 h-7 -ml-3.5" aria-hidden="true">
<path d="M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z" fill-rule="nonzero"></path></svg>
<input type="radio" name="rating-combo" class="pn-rating-input appearance-none cursor-pointer opacity-0 flex-none w-3.5 h-7" aria-label="5 star">
<svg data-pn-star="" viewbox="100 0 100 185" class="pn-rating-star flex-none fill-error w-3.5 h-7 -ml-3.5" aria-hidden="true">
<path d="M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z" fill-rule="nonzero"></path></svg>
</div>
Notes
- The
nameattribute is required. When placing multiple ratings on the same page, always make it unique (otherwise the radio groups collide into a single selection). - Half stars (
:half="true") setvaluein 0.5 steps. Each star is split into 2 radios (mask-half-1/mask-half-2). readonly=trueadds thedisabledattribute to the radios. Send the value via a separate hidden input on form submit.