Designsystem
Tema

Rating

Rating er et sett med radioknapper som lar brukeren gi noe en rating.
<div class="rating">
  <input type="radio" name="rating-1" class="mask mask-star" aria-label="1 star" />
  <input type="radio" name="rating-1" class="mask mask-star" aria-label="2 star" checked="checked" />
  <input type="radio" name="rating-1" class="mask mask-star" aria-label="3 star" />
  <input type="radio" name="rating-1" class="mask mask-star" aria-label="4 star" />
  <input type="radio" name="rating-1" class="mask mask-star" aria-label="5 star" />
</div>

Read-only

<div class="rating">
  <div class="mask mask-star" aria-label="1 star"></div>
  <div class="mask mask-star" aria-label="2 star"></div>
  <div class="mask mask-star" aria-label="3 star" aria-current="true"></div>
  <div class="mask mask-star" aria-label="4 star"></div>
  <div class="mask mask-star" aria-label="5 star"></div>
</div>

Other masks

<div class="rating gap-1">
  <input type="radio" name="rating-3" class="mask mask-heart bg-red-400" aria-label="1 star" />
  <input type="radio" name="rating-3" class="mask mask-heart bg-orange-400" aria-label="2 star" checked="checked" />
  <input type="radio" name="rating-3" class="mask mask-heart bg-yellow-400" aria-label="3 star" />
  <input type="radio" name="rating-3" class="mask mask-heart bg-lime-400" aria-label="4 star" />
  <input type="radio" name="rating-3" class="mask mask-heart bg-green-400" aria-label="5 star" />
</div>