Rating

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

This page is not up to date. Some of the examples might not work as expected.
Class name		Type
rating
Component
For a div containing radio inputs
rating-half
Modifier
To shows half of the shapes. Useful for half star ratings
rating-hidden
Modifier
For the first radio to make it hidden so user can clear the rating
rating-xs
Size
Extra small size
rating-sm
Size
Small size
rating-md
Size
Medium size (default)
rating-lg
Size
Large size
rating-xl
Size
Extra large size

Rating

<div class="$$rating">
  <input type="radio" name="rating-1" class="$$mask $$mask-star" />
  <input type="radio" name="rating-1" class="$$mask $$mask-star" checked="checked" />
  <input type="radio" name="rating-1" class="$$mask $$mask-star" />
  <input type="radio" name="rating-1" class="$$mask $$mask-star" />
  <input type="radio" name="rating-1" class="$$mask $$mask-star" />
</div>
<div class="$$rating">
  <input type="radio" name="rating-1" class="$$mask $$mask-star" />
  <input type="radio" name="rating-1" class="$$mask $$mask-star" checked="checked" />
  <input type="radio" name="rating-1" class="$$mask $$mask-star" />
  <input type="radio" name="rating-1" class="$$mask $$mask-star" />
  <input type="radio" name="rating-1" class="$$mask $$mask-star" />
</div>

mask-star-2 with warning color

<div class="$$rating">
  <input type="radio" name="rating-2" class="$$mask $$mask-star-2 bg-orange-400" />
  <input
    type="radio"
    name="rating-2"
    class="$$mask $$mask-star-2 bg-orange-400"
    checked="checked" />
  <input type="radio" name="rating-2" class="$$mask $$mask-star-2 bg-orange-400" />
  <input type="radio" name="rating-2" class="$$mask $$mask-star-2 bg-orange-400" />
  <input type="radio" name="rating-2" class="$$mask $$mask-star-2 bg-orange-400" />
</div>
<div class="$$rating">
  <input type="radio" name="rating-2" class="$$mask $$mask-star-2 bg-orange-400" />
  <input
    type="radio"
    name="rating-2"
    class="$$mask $$mask-star-2 bg-orange-400"
    checked="checked" />
  <input type="radio" name="rating-2" class="$$mask $$mask-star-2 bg-orange-400" />
  <input type="radio" name="rating-2" class="$$mask $$mask-star-2 bg-orange-400" />
  <input type="radio" name="rating-2" class="$$mask $$mask-star-2 bg-orange-400" />
</div>

mask-heart with multiple colors

<div class="$$rating gap-1">
  <input type="radio" name="rating-3" class="$$mask $$mask-heart bg-red-400" />
  <input type="radio" name="rating-3" class="$$mask $$mask-heart bg-orange-400" checked="checked" />
  <input type="radio" name="rating-3" class="$$mask $$mask-heart bg-yellow-400" />
  <input type="radio" name="rating-3" class="$$mask $$mask-heart bg-lime-400" />
  <input type="radio" name="rating-3" class="$$mask $$mask-heart bg-green-400" />
</div>
<div class="$$rating gap-1">
  <input type="radio" name="rating-3" class="$$mask $$mask-heart bg-red-400" />
  <input type="radio" name="rating-3" class="$$mask $$mask-heart bg-orange-400" checked="checked" />
  <input type="radio" name="rating-3" class="$$mask $$mask-heart bg-yellow-400" />
  <input type="radio" name="rating-3" class="$$mask $$mask-heart bg-lime-400" />
  <input type="radio" name="rating-3" class="$$mask $$mask-heart bg-green-400" />
</div>

mask-star-2 with green-500 color

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

Sizes

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

with

is a hidden radio at the start to allow uses remove their rating.
<div class="$$rating $$rating-lg">
  <input type="radio" name="rating-9" class="$$rating-hidden" />
  <input type="radio" name="rating-9" class="$$mask $$mask-star-2" />
  <input type="radio" name="rating-9" class="$$mask $$mask-star-2" checked="checked" />
  <input type="radio" name="rating-9" class="$$mask $$mask-star-2" />
  <input type="radio" name="rating-9" class="$$mask $$mask-star-2" />
  <input type="radio" name="rating-9" class="$$mask $$mask-star-2" />
</div>
<div class="$$rating $$rating-lg">
  <input type="radio" name="rating-9" class="$$rating-hidden" />
  <input type="radio" name="rating-9" class="$$mask $$mask-star-2" />
  <input type="radio" name="rating-9" class="$$mask $$mask-star-2" checked="checked" />
  <input type="radio" name="rating-9" class="$$mask $$mask-star-2" />
  <input type="radio" name="rating-9" class="$$mask $$mask-star-2" />
  <input type="radio" name="rating-9" class="$$mask $$mask-star-2" />
</div>

half stars

<div class="$$rating $$rating-lg $$rating-half">
  <input type="radio" name="rating-10" class="rating-hidden" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2 $$mask-half-1 bg-green-500" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2 $$mask-half-2 bg-green-500" />
  <input
    type="radio"
    name="rating-10"
    class="$$mask $$mask-star-2 $$mask-half-1 bg-green-500"
    checked="checked" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2 $$mask-half-2 bg-green-500" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2 $$mask-half-1 bg-green-500" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2 $$mask-half-2 bg-green-500" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2 $$mask-half-1 bg-green-500" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2 $$mask-half-2 bg-green-500" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2 $$mask-half-1 bg-green-500" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2 $$mask-half-2 bg-green-500" />
</div>
<div class="$$rating $$rating-lg $$rating-half">
  <input type="radio" name="rating-10" class="rating-hidden" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2 $$mask-half-1 bg-green-500" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2 $$mask-half-2 bg-green-500" />
  <input
    type="radio"
    name="rating-10"
    class="$$mask $$mask-star-2 $$mask-half-1 bg-green-500"
    checked="checked" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2 $$mask-half-2 bg-green-500" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2 $$mask-half-1 bg-green-500" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2 $$mask-half-2 bg-green-500" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2 $$mask-half-1 bg-green-500" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2 $$mask-half-2 bg-green-500" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2 $$mask-half-1 bg-green-500" />
  <input type="radio" name="rating-10" class="$$mask $$mask-star-2 $$mask-half-2 bg-green-500" />
</div>
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective
daisyUI store

Official daisyUI
Figma Library

Available on daisyUI store

More details
Please upgrade your browser