Benjamin Palko
f526f5c0aa
Some checks failed
Deploy / deploy (push) Failing after 39s
Co-authored-by: Benjamin Palko <benjaminpalko@hotmail.com> Reviewed-on: #5
1.2 KiB
1.2 KiB
rating
Rating is a set of radio buttons that allow the user to rate something
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
nameattributes to avoid conflicts with other ratings on the same page - Add
rating-hiddenfor 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 witharia-current="true"