Rating

rating

Rating is a set of radio buttons that allow the user to rate something

rating docs

Class names

• component: rating
• modifier: rating-half, rating-hidden
• size: rating-xs, rating-sm, rating-md, rating-lg, rating-xl

Syntax

<div class="rating {MODIFIER}">
  <input type="radio" name="rating-1" class="mask mask-star" />
</div>

For a read-only (non-interactive) rating, use <div> elements instead of radio inputs and mark the selected one with aria-current="true":

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

Rules

• {MODIFIER} is optional and can have one of the modifier/size class names
• Each set of rating inputs should have unique name attributes to avoid conflicts with other ratings on the same page
• Add rating-hidden for the first radio to make it hidden so user can clear the rating
• For a read-only/non-interactive rating, use <div> elements instead of the radio inputs and mark the selected one with aria-current="true"