Rating

The Rating component displays and collects numeric ratings (e.g. 1–5 stars) with optional custom symbols. Use it for reviews, feedback forms, and satisfaction displays in readonly or interactive mode.

Basic Usage

Use data-mv-rating to render an interactive star rating. The selected value is available for form submission and via the Mv.rating.change event.

<div class="flex flex-col items-start gap-4">
  <div
    data-mv-rating="true"
    data-mv-rating-name="product_rating"
    data-mv-rating-value="5"
  ></div>
</div>

Readonly

Display a fixed rating (e.g. 3 of 5 stars) with data-mv-rating-readonly="true" and data-mv-rating-value="3".

<div class="flex flex-col items-start gap-4">
  <div
    data-mv-rating="true"
    data-mv-rating-value="3"
    data-mv-rating-readonly="true"
  ></div>
</div>

Custom Symbol

Use data-mv-rating-symbol="heart" to show hearts instead of stars.

<div class="flex flex-col items-start gap-4">
  <div
    data-mv-rating="true"
    data-mv-rating-symbol="heart"
    data-mv-rating-value="4"
    data-mv-rating-readonly="true"
  ></div>
</div>