Ratings

Ratings

The Ratings component offers two distinct variants for displaying and collecting rating feedback:

1. Static Rating - A read-only display of rating values with support for fractional ratings
2. Rating Input - An interactive form control that allows users to select a rating value

Both components support customization options including different icons, sizes, and counts.

Static Rating

The Static Rating component displays a visual representation of a rating value using star icons (or custom icons). It supports fractional values, making it ideal for displaying average ratings or review scores.

Preview Code

Copy

Default

Custom Icons

Custom Icon Number

Custom Icon Size

Showing Small Increments Within Icons

<div class="flex flex-col gap-10 skin text-lg font-bold">
  <div class="flex flex-col gap-4">
    Default
    <div
      class="skin-secondary rating wrapper"
      style="--rating-percentage: 0.1"
      role="meter"
      aria-label="Rating: 0.5 out of 5"
      aria-valuemin="0"
      aria-valuemax="5"
      aria-valuenow="0.5"
    ></div>
    <div
      class="skin-secondary rating wrapper"
      style="--rating-percentage: 0.2"
      role="meter"
      aria-label="Rating: 1 out of 5"
      aria-valuemin="0"
      aria-valuemax="5"
      aria-valuenow="1"
    ></div>
    <div
      class="skin-secondary rating wrapper"
      style="--rating-percentage: 0.3"
      role="meter"
      aria-label="Rating: 1.5 out of 5"
      aria-valuemin="0"
      aria-valuemax="5"
      aria-valuenow="1.5"
    ></div>
    <div
      class="skin-secondary rating wrapper"
      style="--rating-percentage: 0.4"
      role="meter"
      aria-label="Rating: 2 out of 5"
      aria-valuemin="0"
      aria-valuemax="5"
      aria-valuenow="2"
    ></div>
    <div
      class="skin-secondary rating wrapper"
      style="--rating-percentage: 0.5"
      role="meter"
      aria-label="Rating: 2.5 out of 5"
      aria-valuemin="0"
      aria-valuemax="5"
      aria-valuenow="2.5"
    ></div>
    <div
      class="skin-secondary rating wrapper"
      style="--rating-percentage: 0.6"
      role="meter"
      aria-label="Rating: 3 out of 5"
      aria-valuemin="0"
      aria-valuemax="5"
      aria-valuenow="3"
    ></div>
    <div
      class="skin-secondary rating wrapper"
      style="--rating-percentage: 0.7"
      role="meter"
      aria-label="Rating: 3.5 out of 5"
      aria-valuemin="0"
      aria-valuemax="5"
      aria-valuenow="3.5"
    ></div>
    <div
      class="skin-secondary rating wrapper"
      style="--rating-percentage: 0.8"
      role="meter"
      aria-label="Rating: 4 out of 5"
      aria-valuemin="0"
      aria-valuemax="5"
      aria-valuenow="4"
    ></div>
    <div
      class="skin-secondary rating wrapper"
      style="--rating-percentage: 0.9"
      role="meter"
      aria-label="Rating: 4.5 out of 5"
      aria-valuemin="0"
      aria-valuemax="5"
      aria-valuenow="4.5"
    ></div>
    <div
      class="skin-secondary rating wrapper"
      style="--rating-percentage: 1"
      role="meter"
      aria-label="Rating: 5 out of 5"
      aria-valuemin="0"
      aria-valuemax="5"
      aria-valuenow="5"
    ></div>
  </div>
  <div
    class="flex flex-col gap-4"
    style="
      --rating-icon: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E&quot;);
    "
  >
    Custom Icons

    <div
      class="skin-tertiary rating wrapper"
      style="--rating-percentage: 0.5"
      role="meter"
      aria-label="Heart Rating: 2.5 out of 5"
      aria-valuemin="0"
      aria-valuemax="5"
      aria-valuenow="2.5"
    ></div>
  </div>
  <div class="flex flex-col gap-4" style="--rating-icon-count: 10">
    Custom Icon Number

    <div
      class="skin-secondary rating wrapper"
      style="--rating-percentage: 0.5"
      role="meter"
      aria-label="Rating: 5 out of 10"
      aria-valuemin="0"
      aria-valuemax="10"
      aria-valuenow="5"
    ></div>
  </div>

  <div class="flex flex-col gap-4" style="--rating-icon-size: 48px">
    Custom Icon Size
    <div
      class="skin-secondary rating wrapper"
      style="--rating-percentage: 0.5"
      role="meter"
      aria-label="Rating: 2.5 out of 5"
      aria-valuemin="0"
      aria-valuemax="5"
      aria-valuenow="2.5"
    ></div>
  </div>
  <div
    class="flex flex-col gap-4"
    style="--rating-icon-size: 30px; --rating-icon-count: 1"
  >
    Showing Small Increments Within Icons
    <div class="flex gap-5">
      <div
        class="skin-secondary rating wrapper"
        style="--rating-percentage: 0.1"
        role="meter"
        aria-label="Rating: 0.1 out of 1"
        aria-valuemin="0"
        aria-valuemax="1"
        aria-valuenow="0.1"
      ></div>
      <div
        class="skin-secondary rating wrapper"
        style="--rating-percentage: 0.2"
        role="meter"
        aria-label="Rating: 0.2 out of 1"
        aria-valuemin="0"
        aria-valuemax="1"
        aria-valuenow="0.2"
      ></div>
      <div
        class="skin-secondary rating wrapper"
        style="--rating-percentage: 0.3"
        role="meter"
        aria-label="Rating: 0.3 out of 1"
        aria-valuemin="0"
        aria-valuemax="1"
        aria-valuenow="0.3"
      ></div>
      <div
        class="skin-secondary rating wrapper"
        style="--rating-percentage: 0.4"
        role="meter"
        aria-label="Rating: 0.4 out of 1"
        aria-valuemin="0"
        aria-valuemax="1"
        aria-valuenow="0.4"
      ></div>
      <div
        class="skin-secondary rating wrapper"
        style="--rating-percentage: 0.5"
        role="meter"
        aria-label="Rating: 0.5 out of 1"
        aria-valuemin="0"
        aria-valuemax="1"
        aria-valuenow="0.5"
      ></div>
      <div
        class="skin-secondary rating wrapper"
        style="--rating-percentage: 0.6"
        role="meter"
        aria-label="Rating: 0.6 out of 1"
        aria-valuemin="0"
        aria-valuemax="1"
        aria-valuenow="0.6"
      ></div>
      <div
        class="skin-secondary rating wrapper"
        style="--rating-percentage: 0.7"
        role="meter"
        aria-label="Rating: 0.7 out of 1"
        aria-valuemin="0"
        aria-valuemax="1"
        aria-valuenow="0.7"
      ></div>
      <div
        class="skin-secondary rating wrapper"
        style="--rating-percentage: 0.8"
        role="meter"
        aria-label="Rating: 0.8 out of 1"
        aria-valuemin="0"
        aria-valuemax="1"
        aria-valuenow="0.8"
      ></div>
      <div
        class="skin-secondary rating wrapper"
        style="--rating-percentage: 0.9"
        role="meter"
        aria-label="Rating: 0.9 out of 1"
        aria-valuemin="0"
        aria-valuemax="1"
        aria-valuenow="0.9"
      ></div>
      <div
        class="skin-secondary rating wrapper"
        style="--rating-percentage: 1"
        role="meter"
        aria-label="Rating: 1 out of 1"
        aria-valuemin="0"
        aria-valuemax="1"
        aria-valuenow="1"
      ></div>
    </div>
  </div>
</div>

<div class="flex flex-col gap-10 skin text-lg font-bold">
  <div class="flex flex-col gap-4">
    Default
    <div
      class="skin-secondary rating wrapper"
      style="--rating-percentage: 0.1"
      role="meter"
      aria-label="Rating: 0.5 out of 5"
      aria-valuemin="0"
      aria-valuemax="5"
      aria-valuenow="0.5"
    ></div>
    <div
      class="skin-secondary rating wrapper"
      style="--rating-percentage: 0.2"
      role="meter"
      aria-label="Rating: 1 out of 5"
      aria-valuemin="0"
      aria-valuemax="5"
      aria-valuenow="1"
    ></div>
    <div
      class="skin-secondary rating wrapper"
      style="--rating-percentage: 0.3"
      role="meter"
      aria-label="Rating: 1.5 out of 5"
      aria-valuemin="0"
      aria-valuemax="5"
      aria-valuenow="1.5"
    ></div>
    <div
      class="skin-secondary rating wrapper"
      style="--rating-percentage: 0.4"
      role="meter"
      aria-label="Rating: 2 out of 5"
      aria-valuemin="0"
      aria-valuemax="5"
      aria-valuenow="2"
    ></div>
    <div
      class="skin-secondary rating wrapper"
      style="--rating-percentage: 0.5"
      role="meter"
      aria-label="Rating: 2.5 out of 5"
      aria-valuemin="0"
      aria-valuemax="5"
      aria-valuenow="2.5"
    ></div>
    <div
      class="skin-secondary rating wrapper"
      style="--rating-percentage: 0.6"
      role="meter"
      aria-label="Rating: 3 out of 5"
      aria-valuemin="0"
      aria-valuemax="5"
      aria-valuenow="3"
    ></div>
    <div
      class="skin-secondary rating wrapper"
      style="--rating-percentage: 0.7"
      role="meter"
      aria-label="Rating: 3.5 out of 5"
      aria-valuemin="0"
      aria-valuemax="5"
      aria-valuenow="3.5"
    ></div>
    <div
      class="skin-secondary rating wrapper"
      style="--rating-percentage: 0.8"
      role="meter"
      aria-label="Rating: 4 out of 5"
      aria-valuemin="0"
      aria-valuemax="5"
      aria-valuenow="4"
    ></div>
    <div
      class="skin-secondary rating wrapper"
      style="--rating-percentage: 0.9"
      role="meter"
      aria-label="Rating: 4.5 out of 5"
      aria-valuemin="0"
      aria-valuemax="5"
      aria-valuenow="4.5"
    ></div>
    <div
      class="skin-secondary rating wrapper"
      style="--rating-percentage: 1"
      role="meter"
      aria-label="Rating: 5 out of 5"
      aria-valuemin="0"
      aria-valuemax="5"
      aria-valuenow="5"
    ></div>
  </div>
  <div
    class="flex flex-col gap-4"
    style="
      --rating-icon: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E&quot;);
    "
  >
    Custom Icons

    <div
      class="skin-tertiary rating wrapper"
      style="--rating-percentage: 0.5"
      role="meter"
      aria-label="Heart Rating: 2.5 out of 5"
      aria-valuemin="0"
      aria-valuemax="5"
      aria-valuenow="2.5"
    ></div>
  </div>
  <div class="flex flex-col gap-4" style="--rating-icon-count: 10">
    Custom Icon Number

    <div
      class="skin-secondary rating wrapper"
      style="--rating-percentage: 0.5"
      role="meter"
      aria-label="Rating: 5 out of 10"
      aria-valuemin="0"
      aria-valuemax="10"
      aria-valuenow="5"
    ></div>
  </div>

  <div class="flex flex-col gap-4" style="--rating-icon-size: 48px">
    Custom Icon Size
    <div
      class="skin-secondary rating wrapper"
      style="--rating-percentage: 0.5"
      role="meter"
      aria-label="Rating: 2.5 out of 5"
      aria-valuemin="0"
      aria-valuemax="5"
      aria-valuenow="2.5"
    ></div>
  </div>
  <div
    class="flex flex-col gap-4"
    style="--rating-icon-size: 30px; --rating-icon-count: 1"
  >
    Showing Small Increments Within Icons
    <div class="flex gap-5">
      <div
        class="skin-secondary rating wrapper"
        style="--rating-percentage: 0.1"
        role="meter"
        aria-label="Rating: 0.1 out of 1"
        aria-valuemin="0"
        aria-valuemax="1"
        aria-valuenow="0.1"
      ></div>
      <div
        class="skin-secondary rating wrapper"
        style="--rating-percentage: 0.2"
        role="meter"
        aria-label="Rating: 0.2 out of 1"
        aria-valuemin="0"
        aria-valuemax="1"
        aria-valuenow="0.2"
      ></div>
      <div
        class="skin-secondary rating wrapper"
        style="--rating-percentage: 0.3"
        role="meter"
        aria-label="Rating: 0.3 out of 1"
        aria-valuemin="0"
        aria-valuemax="1"
        aria-valuenow="0.3"
      ></div>
      <div
        class="skin-secondary rating wrapper"
        style="--rating-percentage: 0.4"
        role="meter"
        aria-label="Rating: 0.4 out of 1"
        aria-valuemin="0"
        aria-valuemax="1"
        aria-valuenow="0.4"
      ></div>
      <div
        class="skin-secondary rating wrapper"
        style="--rating-percentage: 0.5"
        role="meter"
        aria-label="Rating: 0.5 out of 1"
        aria-valuemin="0"
        aria-valuemax="1"
        aria-valuenow="0.5"
      ></div>
      <div
        class="skin-secondary rating wrapper"
        style="--rating-percentage: 0.6"
        role="meter"
        aria-label="Rating: 0.6 out of 1"
        aria-valuemin="0"
        aria-valuemax="1"
        aria-valuenow="0.6"
      ></div>
      <div
        class="skin-secondary rating wrapper"
        style="--rating-percentage: 0.7"
        role="meter"
        aria-label="Rating: 0.7 out of 1"
        aria-valuemin="0"
        aria-valuemax="1"
        aria-valuenow="0.7"
      ></div>
      <div
        class="skin-secondary rating wrapper"
        style="--rating-percentage: 0.8"
        role="meter"
        aria-label="Rating: 0.8 out of 1"
        aria-valuemin="0"
        aria-valuemax="1"
        aria-valuenow="0.8"
      ></div>
      <div
        class="skin-secondary rating wrapper"
        style="--rating-percentage: 0.9"
        role="meter"
        aria-label="Rating: 0.9 out of 1"
        aria-valuemin="0"
        aria-valuemax="1"
        aria-valuenow="0.9"
      ></div>
      <div
        class="skin-secondary rating wrapper"
        style="--rating-percentage: 1"
        role="meter"
        aria-label="Rating: 1 out of 1"
        aria-valuemin="0"
        aria-valuemax="1"
        aria-valuenow="1"
      ></div>
    </div>
  </div>
</div>

Rating Input

The Rating Input component provides an interactive way for users to select a rating. It uses radio inputs styled to display as star icons, offering a familiar and accessible pattern for user feedback.

Preview Code

Copy

Star Rating

No Default Rating

Custom Icons (Hearts)

Custom Icon Count (10 Stars)

Custom Icon Size (Large Stars)

<div class="flex flex-col gap-10 skin text-lg font-bold">
  <div class="flex flex-col">
    Star Rating
    <div class="rating-input skin-secondary wrapper">
      <input
        type="radio"
        id="star1"
        name="rating"
        value="1"
        aria-label="1 star"
      />
      <input
        type="radio"
        id="star2"
        name="rating"
        value="2"
        aria-label="2 stars"
        checked
      />
      <input
        type="radio"
        id="star3"
        name="rating"
        value="3"
        aria-label="3 stars"
      />
      <input
        type="radio"
        id="star4"
        name="rating"
        value="4"
        aria-label="4 stars"
      />
      <input
        type="radio"
        id="star5"
        name="rating"
        value="5"
        aria-label="5 stars"
      />
    </div>
  </div>

  <div class="flex flex-col">
    No Default Rating
    <div class="rating-input skin-secondary wrapper">
      <input
        type="radio"
        id="nostar1"
        name="emptyRating"
        value="1"
        aria-label="1 star"
      />
      <input
        type="radio"
        id="nostar2"
        name="emptyRating"
        value="2"
        aria-label="2 stars"
      />
      <input
        type="radio"
        id="nostar3"
        name="emptyRating"
        value="3"
        aria-label="3 stars"
      />
      <input
        type="radio"
        id="nostar4"
        name="emptyRating"
        value="4"
        aria-label="4 stars"
      />
      <input
        type="radio"
        id="nostar5"
        name="emptyRating"
        value="5"
        aria-label="5 stars"
      />
    </div>
  </div>

  <div
    class="flex flex-col"
    style="
      --rating-icon: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E&quot;);
    "
  >
    Custom Icons (Hearts)
    <div class="rating-input skin-tertiary wrapper">
      <input
        type="radio"
        id="heart1"
        name="heart-rating"
        value="1"
        aria-label="1 heart"
      />
      <input
        type="radio"
        id="heart2"
        name="heart-rating"
        value="2"
        aria-label="2 hearts"
      />
      <input
        type="radio"
        id="heart3"
        name="heart-rating"
        value="3"
        aria-label="3 hearts"
        checked
      />
      <input
        type="radio"
        id="heart4"
        name="heart-rating"
        value="4"
        aria-label="4 hearts"
      />
      <input
        type="radio"
        id="heart5"
        name="heart-rating"
        value="5"
        aria-label="5 hearts"
      />
    </div>
  </div>

  <div class="flex flex-col" style="--rating-icon-count: 10">
    Custom Icon Count (10 Stars)
    <div class="rating-input skin-secondary wrapper">
      <input
        type="radio"
        id="ten1"
        name="ten-rating"
        value="1"
        aria-label="1 star"
      />
      <input
        type="radio"
        id="ten2"
        name="ten-rating"
        value="2"
        aria-label="2 stars"
      />
      <input
        type="radio"
        id="ten3"
        name="ten-rating"
        value="3"
        aria-label="3 stars"
      />
      <input
        type="radio"
        id="ten4"
        name="ten-rating"
        value="4"
        aria-label="4 stars"
      />
      <input
        type="radio"
        id="ten5"
        name="ten-rating"
        value="5"
        aria-label="5 stars"
        checked
      />
      <input
        type="radio"
        id="ten6"
        name="ten-rating"
        value="6"
        aria-label="6 stars"
      />
      <input
        type="radio"
        id="ten7"
        name="ten-rating"
        value="7"
        aria-label="7 stars"
      />
      <input
        type="radio"
        id="ten8"
        name="ten-rating"
        value="8"
        aria-label="8 stars"
      />
      <input
        type="radio"
        id="ten9"
        name="ten-rating"
        value="9"
        aria-label="9 stars"
      />
      <input
        type="radio"
        id="ten10"
        name="ten-rating"
        value="10"
        aria-label="10 stars"
      />
    </div>
  </div>

  <div class="flex flex-col" style="--rating-icon-size: 48px">
    Custom Icon Size (Large Stars)
    <div class="rating-input skin-secondary wrapper">
      <input
        type="radio"
        id="large1"
        name="large-rating"
        value="1"
        aria-label="1 large star"
      />
      <input
        type="radio"
        id="large2"
        name="large-rating"
        value="2"
        aria-label="2 large stars"
      />
      <input
        type="radio"
        id="large3"
        name="large-rating"
        value="3"
        aria-label="3 large stars"
        checked
      />
      <input
        type="radio"
        id="large4"
        name="large-rating"
        value="4"
        aria-label="4 large stars"
      />
      <input
        type="radio"
        id="large5"
        name="large-rating"
        value="5"
        aria-label="5 large stars"
      />
    </div>
  </div>
</div>

<div class="flex flex-col gap-10 skin text-lg font-bold">
  <div class="flex flex-col">
    Star Rating
    <div class="rating-input skin-secondary wrapper">
      <input
        type="radio"
        id="star1"
        name="rating"
        value="1"
        aria-label="1 star"
      />
      <input
        type="radio"
        id="star2"
        name="rating"
        value="2"
        aria-label="2 stars"
        checked
      />
      <input
        type="radio"
        id="star3"
        name="rating"
        value="3"
        aria-label="3 stars"
      />
      <input
        type="radio"
        id="star4"
        name="rating"
        value="4"
        aria-label="4 stars"
      />
      <input
        type="radio"
        id="star5"
        name="rating"
        value="5"
        aria-label="5 stars"
      />
    </div>
  </div>

  <div class="flex flex-col">
    No Default Rating
    <div class="rating-input skin-secondary wrapper">
      <input
        type="radio"
        id="nostar1"
        name="emptyRating"
        value="1"
        aria-label="1 star"
      />
      <input
        type="radio"
        id="nostar2"
        name="emptyRating"
        value="2"
        aria-label="2 stars"
      />
      <input
        type="radio"
        id="nostar3"
        name="emptyRating"
        value="3"
        aria-label="3 stars"
      />
      <input
        type="radio"
        id="nostar4"
        name="emptyRating"
        value="4"
        aria-label="4 stars"
      />
      <input
        type="radio"
        id="nostar5"
        name="emptyRating"
        value="5"
        aria-label="5 stars"
      />
    </div>
  </div>

  <div
    class="flex flex-col"
    style="
      --rating-icon: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E&quot;);
    "
  >
    Custom Icons (Hearts)
    <div class="rating-input skin-tertiary wrapper">
      <input
        type="radio"
        id="heart1"
        name="heart-rating"
        value="1"
        aria-label="1 heart"
      />
      <input
        type="radio"
        id="heart2"
        name="heart-rating"
        value="2"
        aria-label="2 hearts"
      />
      <input
        type="radio"
        id="heart3"
        name="heart-rating"
        value="3"
        aria-label="3 hearts"
        checked
      />
      <input
        type="radio"
        id="heart4"
        name="heart-rating"
        value="4"
        aria-label="4 hearts"
      />
      <input
        type="radio"
        id="heart5"
        name="heart-rating"
        value="5"
        aria-label="5 hearts"
      />
    </div>
  </div>

  <div class="flex flex-col" style="--rating-icon-count: 10">
    Custom Icon Count (10 Stars)
    <div class="rating-input skin-secondary wrapper">
      <input
        type="radio"
        id="ten1"
        name="ten-rating"
        value="1"
        aria-label="1 star"
      />
      <input
        type="radio"
        id="ten2"
        name="ten-rating"
        value="2"
        aria-label="2 stars"
      />
      <input
        type="radio"
        id="ten3"
        name="ten-rating"
        value="3"
        aria-label="3 stars"
      />
      <input
        type="radio"
        id="ten4"
        name="ten-rating"
        value="4"
        aria-label="4 stars"
      />
      <input
        type="radio"
        id="ten5"
        name="ten-rating"
        value="5"
        aria-label="5 stars"
        checked
      />
      <input
        type="radio"
        id="ten6"
        name="ten-rating"
        value="6"
        aria-label="6 stars"
      />
      <input
        type="radio"
        id="ten7"
        name="ten-rating"
        value="7"
        aria-label="7 stars"
      />
      <input
        type="radio"
        id="ten8"
        name="ten-rating"
        value="8"
        aria-label="8 stars"
      />
      <input
        type="radio"
        id="ten9"
        name="ten-rating"
        value="9"
        aria-label="9 stars"
      />
      <input
        type="radio"
        id="ten10"
        name="ten-rating"
        value="10"
        aria-label="10 stars"
      />
    </div>
  </div>

  <div class="flex flex-col" style="--rating-icon-size: 48px">
    Custom Icon Size (Large Stars)
    <div class="rating-input skin-secondary wrapper">
      <input
        type="radio"
        id="large1"
        name="large-rating"
        value="1"
        aria-label="1 large star"
      />
      <input
        type="radio"
        id="large2"
        name="large-rating"
        value="2"
        aria-label="2 large stars"
      />
      <input
        type="radio"
        id="large3"
        name="large-rating"
        value="3"
        aria-label="3 large stars"
        checked
      />
      <input
        type="radio"
        id="large4"
        name="large-rating"
        value="4"
        aria-label="4 large stars"
      />
      <input
        type="radio"
        id="large5"
        name="large-rating"
        value="5"
        aria-label="5 large stars"
      />
    </div>
  </div>
</div>

Customization

Both rating components support customization through CSS variables:

Custom Icons

You can replace the default star icon with any SVG by setting the --rating-icon CSS variable:

<div
  class="rating wrapper"
  style="
    --rating-icon: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E&quot;);
    --rating-percentage: 0.5;
  "
  role="meter"
  aria-label="Heart Rating: 2.5 out of 5"
  aria-valuemin="0"
  aria-valuemax="5"
  aria-valuenow="2.5"
></div>

Custom Number of Icons

You can adjust the number of icons displayed by changing the --rating-icon-count variable:

<div
  class="rating wrapper"
  style="--rating-icon-count: 10; --rating-percentage: 0.5"
  role="meter"
  aria-label="Rating: 5 out of 10"
  aria-valuemin="0"
  aria-valuemax="10"
  aria-valuenow="5"
></div>

Custom Icon Size

You can change the size of the icons by setting the --rating-icon-size variable:

<div
  class="rating wrapper"
  style="--rating-icon-size: 48px; --rating-percentage: 0.5"
  role="meter"
  aria-label="Rating: 2.5 out of 5"
  aria-valuemin="0"
  aria-valuemax="5"
  aria-valuenow="2.5"
></div>

CSS Variables

Variable	Default Value	Description
--rating-icon-count	5	Number of rating icons to display
--rating-icon-size	24px	Size of each rating icon
--rating-percentage	0	Percentage fill for static ratings (0.0 to 1.0)
--rating-icon-gap	4px	Gap between rating icons in the input variant
--rating-icon	url(...)	SVG icon used for ratings (default is a star)

The component uses two key colors that should be set in your skin or theme:

Variable	Description
--color-foreground	Color for the filled/active portion of the rating
--color-background	Color for the unfilled/inactive portion of the rating

Accessibility

Implemented Accessibility Features

• Semantic structure with appropriate ARIA roles (meter for static, radiogroup for input)
• Clear descriptive labels through aria-label attributes
• Proper value representation using aria-valuemin, aria-valuemax, and aria-valuenow
• Keyboard navigation support through native radio inputs in the interactive variant
• Visual focus indicators for interactive ratings
• Interactive rating state indication through native radio checked state
• Touch-friendly target sizes
• Consistent naming patterns across all controls

Accessibility Considerations when Implementing

• Ensure radio input names are unique per form context
• Provide clear instructions for users on what the rating represents
• Consider adding labels or tooltips to explain rating values
• Ensure color contrast between filled and unfilled states meets WCAG guidelines
• Match rating visualization with any adjacent text description
• Consider adding additional context for screen readers when appropriate
• For critical rating inputs, consider confirming the selection before submission