评分

评分是一组单选按钮，允许用户对某事物进行评分。

类名	类型
评分	组件	用于包含单选输入框的 div
半星评分	修饰符	用于显示形状的一半。对半星评分很有用
隐藏评分	修饰符	用于隐藏第一个单选按钮，以便用户可以清除评分
超小评分	尺寸	超小尺寸
小型评分	尺寸	小型尺寸
中型评分	尺寸	中等尺寸[默认]
大型评分	尺寸	大型尺寸
超大型评分	尺寸	超大尺寸

每个评分中的项目应具有唯一的名称属性，以避免与同一页面上的其他评分冲突。

评分

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

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

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

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

只读评分

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

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

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

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

带有警告色的 mask-star-2

<div class="$$rating">
  <input type="radio" name="rating-2" class="$$mask $$mask-star-2 bg-orange-400" aria-label="1 star" />
  <input type="radio" name="rating-2" class="$$mask $$mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
  <input type="radio" name="rating-2" class="$$mask $$mask-star-2 bg-orange-400" aria-label="3 star" />
  <input type="radio" name="rating-2" class="$$mask $$mask-star-2 bg-orange-400" aria-label="4 star" />
  <input type="radio" name="rating-2" class="$$mask $$mask-star-2 bg-orange-400" aria-label="5 star" />
</div>

<div class="$$rating">
  <input type="radio" name="rating-2" class="$$mask $$mask-star-2 bg-orange-400" aria-label="1 star" />
  <input type="radio" name="rating-2" class="$$mask $$mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
  <input type="radio" name="rating-2" class="$$mask $$mask-star-2 bg-orange-400" aria-label="3 star" />
  <input type="radio" name="rating-2" class="$$mask $$mask-star-2 bg-orange-400" aria-label="4 star" />
  <input type="radio" name="rating-2" class="$$mask $$mask-star-2 bg-orange-400" aria-label="5 star" />
</div>

            
                <div class="$$rating">
  <input type="radio" name="rating-2" class="$$mask $$mask-star-2 bg-orange-400" aria-label="1 star" />
  <input type="radio" name="rating-2" class="$$mask $$mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
  <input type="radio" name="rating-2" class="$$mask $$mask-star-2 bg-orange-400" aria-label="3 star" />
  <input type="radio" name="rating-2" class="$$mask $$mask-star-2 bg-orange-400" aria-label="4 star" />
  <input type="radio" name="rating-2" class="$$mask $$mask-star-2 bg-orange-400" aria-label="5 star" />
</div>

<div class="$$rating">
  <input type="radio" name="rating-2" class="$$mask $$mask-star-2 bg-orange-400" aria-label="1 star" />
  <input type="radio" name="rating-2" class="$$mask $$mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
  <input type="radio" name="rating-2" class="$$mask $$mask-star-2 bg-orange-400" aria-label="3 star" />
  <input type="radio" name="rating-2" class="$$mask $$mask-star-2 bg-orange-400" aria-label="4 star" />
  <input type="radio" name="rating-2" class="$$mask $$mask-star-2 bg-orange-400" aria-label="5 star" />
</div>

带有多种颜色的 mask-heart

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

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

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

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

带有 green-500 颜色的 mask-star-2

<div class="$$rating">
  <input type="radio" name="rating-4" class="$$mask $$mask-star-2 bg-green-500" aria-label="1 star" />
  <input type="radio" name="rating-4" class="$$mask $$mask-star-2 bg-green-500" aria-label="2 star" checked="checked" />
  <input type="radio" name="rating-4" class="$$mask $$mask-star-2 bg-green-500" aria-label="3 star" />
  <input type="radio" name="rating-4" class="$$mask $$mask-star-2 bg-green-500" aria-label="4 star" />
  <input type="radio" name="rating-4" class="$$mask $$mask-star-2 bg-green-500" aria-label="5 star" />
</div>

<div class="$$rating">
  <input type="radio" name="rating-4" class="$$mask $$mask-star-2 bg-green-500" aria-label="1 star" />
  <input type="radio" name="rating-4" class="$$mask $$mask-star-2 bg-green-500" aria-label="2 star" checked="checked" />
  <input type="radio" name="rating-4" class="$$mask $$mask-star-2 bg-green-500" aria-label="3 star" />
  <input type="radio" name="rating-4" class="$$mask $$mask-star-2 bg-green-500" aria-label="4 star" />
  <input type="radio" name="rating-4" class="$$mask $$mask-star-2 bg-green-500" aria-label="5 star" />
</div>

            
                <div class="$$rating">
  <input type="radio" name="rating-4" class="$$mask $$mask-star-2 bg-green-500" aria-label="1 star" />
  <input type="radio" name="rating-4" class="$$mask $$mask-star-2 bg-green-500" aria-label="2 star" checked="checked" />
  <input type="radio" name="rating-4" class="$$mask $$mask-star-2 bg-green-500" aria-label="3 star" />
  <input type="radio" name="rating-4" class="$$mask $$mask-star-2 bg-green-500" aria-label="4 star" />
  <input type="radio" name="rating-4" class="$$mask $$mask-star-2 bg-green-500" aria-label="5 star" />
</div>

<div class="$$rating">
  <input type="radio" name="rating-4" class="$$mask $$mask-star-2 bg-green-500" aria-label="1 star" />
  <input type="radio" name="rating-4" class="$$mask $$mask-star-2 bg-green-500" aria-label="2 star" checked="checked" />
  <input type="radio" name="rating-4" class="$$mask $$mask-star-2 bg-green-500" aria-label="3 star" />
  <input type="radio" name="rating-4" class="$$mask $$mask-star-2 bg-green-500" aria-label="4 star" />
  <input type="radio" name="rating-4" class="$$mask $$mask-star-2 bg-green-500" aria-label="5 star" />
</div>

尺寸

<!-- xs -->
<div class="$$rating $$rating-xs">
  <input type="radio" name="rating-5" class="$$mask $$mask-star-2 bg-orange-400" aria-label="1 star" />
  <input type="radio" name="rating-5" class="$$mask $$mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
  <input type="radio" name="rating-5" class="$$mask $$mask-star-2 bg-orange-400" aria-label="3 star" />
  <input type="radio" name="rating-5" class="$$mask $$mask-star-2 bg-orange-400" aria-label="4 star" />
  <input type="radio" name="rating-5" class="$$mask $$mask-star-2 bg-orange-400" aria-label="5 star" />
</div>
<!-- sm -->
<div class="$$rating $$rating-sm">
  <input type="radio" name="rating-6" class="$$mask $$mask-star-2 bg-orange-400" aria-label="1 star" />
  <input type="radio" name="rating-6" class="$$mask $$mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
  <input type="radio" name="rating-6" class="$$mask $$mask-star-2 bg-orange-400" aria-label="3 star" />
  <input type="radio" name="rating-6" class="$$mask $$mask-star-2 bg-orange-400" aria-label="4 star" />
  <input type="radio" name="rating-6" class="$$mask $$mask-star-2 bg-orange-400" aria-label="5 star" />
</div>
<!-- md -->
<div class="$$rating $$rating-md">
  <input type="radio" name="rating-7" class="$$mask $$mask-star-2 bg-orange-400" aria-label="1 star" />
  <input type="radio" name="rating-7" class="$$mask $$mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
  <input type="radio" name="rating-7" class="$$mask $$mask-star-2 bg-orange-400" aria-label="3 star" />
  <input type="radio" name="rating-7" class="$$mask $$mask-star-2 bg-orange-400" aria-label="4 star" />
  <input type="radio" name="rating-7" class="$$mask $$mask-star-2 bg-orange-400" aria-label="5 star" />
</div>
<!-- lg -->
<div class="$$rating $$rating-lg">
  <input type="radio" name="rating-8" class="$$mask $$mask-star-2 bg-orange-400" aria-label="1 star" />
  <input type="radio" name="rating-8" class="$$mask $$mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
  <input type="radio" name="rating-8" class="$$mask $$mask-star-2 bg-orange-400" aria-label="3 star" />
  <input type="radio" name="rating-8" class="$$mask $$mask-star-2 bg-orange-400" aria-label="4 star" />
  <input type="radio" name="rating-8" class="$$mask $$mask-star-2 bg-orange-400" aria-label="5 star" />
</div>
<!-- xl -->
<div class="$$rating $$rating-xl">
  <input type="radio" name="rating-9" class="$$mask $$mask-star-2 bg-orange-400" aria-label="1 star" />
  <input type="radio" name="rating-9" class="$$mask $$mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
  <input type="radio" name="rating-9" class="$$mask $$mask-star-2 bg-orange-400" aria-label="3 star" />
  <input type="radio" name="rating-9" class="$$mask $$mask-star-2 bg-orange-400" aria-label="4 star" />
  <input type="radio" name="rating-9" class="$$mask $$mask-star-2 bg-orange-400" aria-label="5 star" />
</div>

<!-- xs -->
<div class="$$rating $$rating-xs">
  <input type="radio" name="rating-5" class="$$mask $$mask-star-2 bg-orange-400" aria-label="1 star" />
  <input type="radio" name="rating-5" class="$$mask $$mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
  <input type="radio" name="rating-5" class="$$mask $$mask-star-2 bg-orange-400" aria-label="3 star" />
  <input type="radio" name="rating-5" class="$$mask $$mask-star-2 bg-orange-400" aria-label="4 star" />
  <input type="radio" name="rating-5" class="$$mask $$mask-star-2 bg-orange-400" aria-label="5 star" />
</div>
<!-- sm -->
<div class="$$rating $$rating-sm">
  <input type="radio" name="rating-6" class="$$mask $$mask-star-2 bg-orange-400" aria-label="1 star" />
  <input type="radio" name="rating-6" class="$$mask $$mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
  <input type="radio" name="rating-6" class="$$mask $$mask-star-2 bg-orange-400" aria-label="3 star" />
  <input type="radio" name="rating-6" class="$$mask $$mask-star-2 bg-orange-400" aria-label="4 star" />
  <input type="radio" name="rating-6" class="$$mask $$mask-star-2 bg-orange-400" aria-label="5 star" />
</div>
<!-- md -->
<div class="$$rating $$rating-md">
  <input type="radio" name="rating-7" class="$$mask $$mask-star-2 bg-orange-400" aria-label="1 star" />
  <input type="radio" name="rating-7" class="$$mask $$mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
  <input type="radio" name="rating-7" class="$$mask $$mask-star-2 bg-orange-400" aria-label="3 star" />
  <input type="radio" name="rating-7" class="$$mask $$mask-star-2 bg-orange-400" aria-label="4 star" />
  <input type="radio" name="rating-7" class="$$mask $$mask-star-2 bg-orange-400" aria-label="5 star" />
</div>
<!-- lg -->
<div class="$$rating $$rating-lg">
  <input type="radio" name="rating-8" class="$$mask $$mask-star-2 bg-orange-400" aria-label="1 star" />
  <input type="radio" name="rating-8" class="$$mask $$mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
  <input type="radio" name="rating-8" class="$$mask $$mask-star-2 bg-orange-400" aria-label="3 star" />
  <input type="radio" name="rating-8" class="$$mask $$mask-star-2 bg-orange-400" aria-label="4 star" />
  <input type="radio" name="rating-8" class="$$mask $$mask-star-2 bg-orange-400" aria-label="5 star" />
</div>
<!-- xl -->
<div class="$$rating $$rating-xl">
  <input type="radio" name="rating-9" class="$$mask $$mask-star-2 bg-orange-400" aria-label="1 star" />
  <input type="radio" name="rating-9" class="$$mask $$mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
  <input type="radio" name="rating-9" class="$$mask $$mask-star-2 bg-orange-400" aria-label="3 star" />
  <input type="radio" name="rating-9" class="$$mask $$mask-star-2 bg-orange-400" aria-label="4 star" />
  <input type="radio" name="rating-9" class="$$mask $$mask-star-2 bg-orange-400" aria-label="5 star" />
</div>

            
                <!-- xs -->
<div class="$$rating $$rating-xs">
  <input type="radio" name="rating-5" class="$$mask $$mask-star-2 bg-orange-400" aria-label="1 star" />
  <input type="radio" name="rating-5" class="$$mask $$mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
  <input type="radio" name="rating-5" class="$$mask $$mask-star-2 bg-orange-400" aria-label="3 star" />
  <input type="radio" name="rating-5" class="$$mask $$mask-star-2 bg-orange-400" aria-label="4 star" />
  <input type="radio" name="rating-5" class="$$mask $$mask-star-2 bg-orange-400" aria-label="5 star" />
</div>
<!-- sm -->
<div class="$$rating $$rating-sm">
  <input type="radio" name="rating-6" class="$$mask $$mask-star-2 bg-orange-400" aria-label="1 star" />
  <input type="radio" name="rating-6" class="$$mask $$mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
  <input type="radio" name="rating-6" class="$$mask $$mask-star-2 bg-orange-400" aria-label="3 star" />
  <input type="radio" name="rating-6" class="$$mask $$mask-star-2 bg-orange-400" aria-label="4 star" />
  <input type="radio" name="rating-6" class="$$mask $$mask-star-2 bg-orange-400" aria-label="5 star" />
</div>
<!-- md -->
<div class="$$rating $$rating-md">
  <input type="radio" name="rating-7" class="$$mask $$mask-star-2 bg-orange-400" aria-label="1 star" />
  <input type="radio" name="rating-7" class="$$mask $$mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
  <input type="radio" name="rating-7" class="$$mask $$mask-star-2 bg-orange-400" aria-label="3 star" />
  <input type="radio" name="rating-7" class="$$mask $$mask-star-2 bg-orange-400" aria-label="4 star" />
  <input type="radio" name="rating-7" class="$$mask $$mask-star-2 bg-orange-400" aria-label="5 star" />
</div>
<!-- lg -->
<div class="$$rating $$rating-lg">
  <input type="radio" name="rating-8" class="$$mask $$mask-star-2 bg-orange-400" aria-label="1 star" />
  <input type="radio" name="rating-8" class="$$mask $$mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
  <input type="radio" name="rating-8" class="$$mask $$mask-star-2 bg-orange-400" aria-label="3 star" />
  <input type="radio" name="rating-8" class="$$mask $$mask-star-2 bg-orange-400" aria-label="4 star" />
  <input type="radio" name="rating-8" class="$$mask $$mask-star-2 bg-orange-400" aria-label="5 star" />
</div>
<!-- xl -->
<div class="$$rating $$rating-xl">
  <input type="radio" name="rating-9" class="$$mask $$mask-star-2 bg-orange-400" aria-label="1 star" />
  <input type="radio" name="rating-9" class="$$mask $$mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
  <input type="radio" name="rating-9" class="$$mask $$mask-star-2 bg-orange-400" aria-label="3 star" />
  <input type="radio" name="rating-9" class="$$mask $$mask-star-2 bg-orange-400" aria-label="4 star" />
  <input type="radio" name="rating-9" class="$$mask $$mask-star-2 bg-orange-400" aria-label="5 star" />
</div>

<!-- xs -->
<div class="$$rating $$rating-xs">
  <input type="radio" name="rating-5" class="$$mask $$mask-star-2 bg-orange-400" aria-label="1 star" />
  <input type="radio" name="rating-5" class="$$mask $$mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
  <input type="radio" name="rating-5" class="$$mask $$mask-star-2 bg-orange-400" aria-label="3 star" />
  <input type="radio" name="rating-5" class="$$mask $$mask-star-2 bg-orange-400" aria-label="4 star" />
  <input type="radio" name="rating-5" class="$$mask $$mask-star-2 bg-orange-400" aria-label="5 star" />
</div>
<!-- sm -->
<div class="$$rating $$rating-sm">
  <input type="radio" name="rating-6" class="$$mask $$mask-star-2 bg-orange-400" aria-label="1 star" />
  <input type="radio" name="rating-6" class="$$mask $$mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
  <input type="radio" name="rating-6" class="$$mask $$mask-star-2 bg-orange-400" aria-label="3 star" />
  <input type="radio" name="rating-6" class="$$mask $$mask-star-2 bg-orange-400" aria-label="4 star" />
  <input type="radio" name="rating-6" class="$$mask $$mask-star-2 bg-orange-400" aria-label="5 star" />
</div>
<!-- md -->
<div class="$$rating $$rating-md">
  <input type="radio" name="rating-7" class="$$mask $$mask-star-2 bg-orange-400" aria-label="1 star" />
  <input type="radio" name="rating-7" class="$$mask $$mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
  <input type="radio" name="rating-7" class="$$mask $$mask-star-2 bg-orange-400" aria-label="3 star" />
  <input type="radio" name="rating-7" class="$$mask $$mask-star-2 bg-orange-400" aria-label="4 star" />
  <input type="radio" name="rating-7" class="$$mask $$mask-star-2 bg-orange-400" aria-label="5 star" />
</div>
<!-- lg -->
<div class="$$rating $$rating-lg">
  <input type="radio" name="rating-8" class="$$mask $$mask-star-2 bg-orange-400" aria-label="1 star" />
  <input type="radio" name="rating-8" class="$$mask $$mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
  <input type="radio" name="rating-8" class="$$mask $$mask-star-2 bg-orange-400" aria-label="3 star" />
  <input type="radio" name="rating-8" class="$$mask $$mask-star-2 bg-orange-400" aria-label="4 star" />
  <input type="radio" name="rating-8" class="$$mask $$mask-star-2 bg-orange-400" aria-label="5 star" />
</div>
<!-- xl -->
<div class="$$rating $$rating-xl">
  <input type="radio" name="rating-9" class="$$mask $$mask-star-2 bg-orange-400" aria-label="1 star" />
  <input type="radio" name="rating-9" class="$$mask $$mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
  <input type="radio" name="rating-9" class="$$mask $$mask-star-2 bg-orange-400" aria-label="3 star" />
  <input type="radio" name="rating-9" class="$$mask $$mask-star-2 bg-orange-400" aria-label="4 star" />
  <input type="radio" name="rating-9" class="$$mask $$mask-star-2 bg-orange-400" aria-label="5 star" />
</div>

带有

是开始时的一个隐藏单选按钮，允许用户移除他们的评分。

<div class="$$rating $$rating-lg">
  <input type="radio" name="rating-10" class="$$rating-hidden" aria-label="clear" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2" aria-label="1 star" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2" aria-label="2 star" checked="checked" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2" aria-label="3 star" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2" aria-label="4 star" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2" aria-label="5 star" />
</div>

<div class="$$rating $$rating-lg">
  <input type="radio" name="rating-10" class="$$rating-hidden" aria-label="clear" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2" aria-label="1 star" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2" aria-label="2 star" checked="checked" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2" aria-label="3 star" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2" aria-label="4 star" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2" aria-label="5 star" />
</div>

            
                <div class="$$rating $$rating-lg">
  <input type="radio" name="rating-10" class="$$rating-hidden" aria-label="clear" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2" aria-label="1 star" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2" aria-label="2 star" checked="checked" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2" aria-label="3 star" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2" aria-label="4 star" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2" aria-label="5 star" />
</div>

<div class="$$rating $$rating-lg">
  <input type="radio" name="rating-10" class="$$rating-hidden" aria-label="clear" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2" aria-label="1 star" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2" aria-label="2 star" checked="checked" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2" aria-label="3 star" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2" aria-label="4 star" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2" aria-label="5 star" />
</div>

半星

<div class="$$rating $$rating-lg $$rating-half">
  <input type="radio" name="rating-11" class="$$rating-hidden" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-1 bg-green-500" aria-label="0.5 star" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-2 bg-green-500" aria-label="1 star" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-1 bg-green-500" aria-label="1.5 star" checked="checked" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-2 bg-green-500" aria-label="2 star" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-1 bg-green-500" aria-label="2.5 star" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-2 bg-green-500" aria-label="3 star" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-1 bg-green-500" aria-label="3.5 star" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-2 bg-green-500" aria-label="4 star" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-1 bg-green-500" aria-label="4.5 star" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-2 bg-green-500" aria-label="5 star" />
</div>

<div class="$$rating $$rating-lg $$rating-half">
  <input type="radio" name="rating-11" class="$$rating-hidden" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-1 bg-green-500" aria-label="0.5 star" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-2 bg-green-500" aria-label="1 star" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-1 bg-green-500" aria-label="1.5 star" checked="checked" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-2 bg-green-500" aria-label="2 star" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-1 bg-green-500" aria-label="2.5 star" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-2 bg-green-500" aria-label="3 star" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-1 bg-green-500" aria-label="3.5 star" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-2 bg-green-500" aria-label="4 star" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-1 bg-green-500" aria-label="4.5 star" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-2 bg-green-500" aria-label="5 star" />
</div>

            
                <div class="$$rating $$rating-lg $$rating-half">
  <input type="radio" name="rating-11" class="$$rating-hidden" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-1 bg-green-500" aria-label="0.5 star" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-2 bg-green-500" aria-label="1 star" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-1 bg-green-500" aria-label="1.5 star" checked="checked" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-2 bg-green-500" aria-label="2 star" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-1 bg-green-500" aria-label="2.5 star" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-2 bg-green-500" aria-label="3 star" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-1 bg-green-500" aria-label="3.5 star" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-2 bg-green-500" aria-label="4 star" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-1 bg-green-500" aria-label="4.5 star" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-2 bg-green-500" aria-label="5 star" />
</div>

<div class="$$rating $$rating-lg $$rating-half">
  <input type="radio" name="rating-11" class="$$rating-hidden" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-1 bg-green-500" aria-label="0.5 star" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-2 bg-green-500" aria-label="1 star" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-1 bg-green-500" aria-label="1.5 star" checked="checked" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-2 bg-green-500" aria-label="2 star" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-1 bg-green-500" aria-label="2.5 star" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-2 bg-green-500" aria-label="3 star" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-1 bg-green-500" aria-label="3.5 star" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-2 bg-green-500" aria-label="4 star" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-1 bg-green-500" aria-label="4.5 star" />
  <input type="radio" name="rating-11" class="$$mask $$mask-star-2 $$mask-half-2 bg-green-500" aria-label="5 star" />
</div>