Metronic - Tailwind CSS Rating

Tailwind CSS Rating example with maximum number value.

				
					<div class="kt-rating">
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
</div>

Tailwind CSS Rating example with whole decimal value.

Preview HTML

				
					<div class="kt-rating">
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-warning text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-warning text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-warning text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-warning text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label">
  <i class="kt-rating-on ki-solid ki-star leading-none text-warning text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
</div>

Tailwind CSS Rating example with whole decimal value.

Preview HTML

				
					<div class="kt-rating">
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label indeterminate">
  <i class="kt-rating-on ki-solid ki-star leading-none text-base" style="width: 50.0%">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label">
  <i class="kt-rating-on ki-solid ki-star leading-none text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
</div>

Use Tailwind CSS Rating as an input for form submission, allowing users to easily provide feedback through selectable rating values.

Preview HTML

Reset

				
					<div class="kt-rating">
 <!--begin::Reset rating-->
 <label class="kt-rating-label kt-btn kt-btn-outline mr-2" for="rating_1">
  Reset
 </label>
 <input class="kt-rating-input" id="rating_1" name="rating2" type="radio" value="0"/>
 <!--end::Reset rating-->
 <!--begin::Star 1-->
 <label class="kt-rating-label checked" for="rating_1_1">
  <i class="kt-rating-on ki-solid ki-star leading-none text-warning text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </label>
 <input checked="" class="kt-rating-input" id="rating_1_1" name="rating2" type="radio" value="1"/>
 <!--end::Star 1-->
 <!--begin::Star 2-->
 <label class="kt-rating-label checked" for="rating_1_2">
  <i class="kt-rating-on ki-solid ki-star leading-none text-warning text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </label>
 <input checked="" class="kt-rating-input" id="rating_1_2" name="rating2" type="radio" value="2"/>
 <!--end::Star 2-->
 <!--begin::Star 3-->
 <label class="kt-rating-label" for="rating_1_3">
  <i class="kt-rating-on ki-solid ki-star leading-none text-warning text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </label>
 <input class="kt-rating-input" id="rating_1_3" name="rating2" type="radio" value="3"/>
 <!--end::Star 3-->
 <!--begin::Star 4-->
 <label class="kt-rating-label" for="rating_1_4">
  <i class="kt-rating-on ki-solid ki-star leading-none text-warning text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </label>
 <input class="kt-rating-input" id="rating_1_4" name="rating2" type="radio" value="4"/>
 <!--end::Star 4-->
 <!--begin::Star 5-->
 <label class="kt-rating-label" for="rating_1_5">
  <i class="kt-rating-on ki-solid ki-star leading-none text-warning text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </label>
 <input class="kt-rating-input" id="rating_1_5" name="rating2" type="radio" value="5"/>
 <!--end::Star 5-->
</div>

Use the custom Tailwind CSS Color classes to customize the Tailwind CSS Rating component.

Preview HTML

				
					<div class="kt-rating">
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-primary text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-primary text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-primary text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label indeterminate">
  <i class="kt-rating-on ki-solid ki-star leading-none text-primary text-base" style="width: 50.0%">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label">
  <i class="kt-rating-on ki-solid ki-star leading-none text-primary text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
</div>
<div class="kt-rating">
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-green-500 text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-green-500 text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-green-500 text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label indeterminate">
  <i class="kt-rating-on ki-solid ki-star leading-none text-green-500 text-base" style="width: 50.0%">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label">
  <i class="kt-rating-on ki-solid ki-star leading-none text-green-500 text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
</div>
<div class="kt-rating">
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-info text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-info text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-info text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label indeterminate">
  <i class="kt-rating-on ki-solid ki-star leading-none text-info text-base" style="width: 50.0%">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label">
  <i class="kt-rating-on ki-solid ki-star leading-none text-info text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
</div>
<div class="kt-rating">
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-warning text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-warning text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-warning text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label indeterminate">
  <i class="kt-rating-on ki-solid ki-star leading-none text-warning text-base" style="width: 50.0%">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label">
  <i class="kt-rating-on ki-solid ki-star leading-none text-warning text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
</div>
<div class="kt-rating">
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-danger text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-danger text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-danger text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label indeterminate">
  <i class="kt-rating-on ki-solid ki-star leading-none text-danger text-base" style="width: 50.0%">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label">
  <i class="kt-rating-on ki-solid ki-star leading-none text-danger text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
</div>
<div class="kt-rating">
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-dark text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-dark text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-dark text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label indeterminate">
  <i class="kt-rating-on ki-solid ki-star leading-none text-dark text-base" style="width: 50.0%">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label">
  <i class="kt-rating-on ki-solid ki-star leading-none text-dark text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
</div>

Use the custom Tailwind Font Size classes to customize the Tailwind CSS Rating icons size.

Preview HTML

				
					<div class="kt-rating">
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
 <div class="kt-rating-label">
  <i class="kt-rating-on ki-solid ki-star leading-none text-base">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-base">
  </i>
 </div>
</div>
<div class="kt-rating">
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-lg">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-lg">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-lg">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-lg">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-lg">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-lg">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-lg">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-lg">
  </i>
 </div>
 <div class="kt-rating-label">
  <i class="kt-rating-on ki-solid ki-star leading-none text-lg">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-lg">
  </i>
 </div>
</div>
<div class="kt-rating">
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-xl">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-xl">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-xl">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-xl">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-xl">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-xl">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-xl">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-xl">
  </i>
 </div>
 <div class="kt-rating-label">
  <i class="kt-rating-on ki-solid ki-star leading-none text-xl">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-xl">
  </i>
 </div>
</div>
<div class="kt-rating">
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-2xl">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-2xl">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-2xl">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-2xl">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-2xl">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-2xl">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-2xl">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-2xl">
  </i>
 </div>
 <div class="kt-rating-label">
  <i class="kt-rating-on ki-solid ki-star leading-none text-2xl">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-2xl">
  </i>
 </div>
</div>
<div class="kt-rating">
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-3xl">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-3xl">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-3xl">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-3xl">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-3xl">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-3xl">
  </i>
 </div>
 <div class="kt-rating-label checked">
  <i class="kt-rating-on ki-solid ki-star leading-none text-3xl">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-3xl">
  </i>
 </div>
 <div class="kt-rating-label">
  <i class="kt-rating-on ki-solid ki-star leading-none text-3xl">
  </i>
  <i class="kt-rating-off ki-outline ki-star leading-none text-3xl">
  </i>
 </div>
</div>

Getting Started

Customization

Base Components

Navigation

Forms

3rd-Party Plugins

Tailwind CSS Rating

Default Rating

Non-decimal

Decimal

Input

Colors

Sizes

On This Page

Getting Started

Customization

Base Components

Navigation

Forms

3rd-Party Plugins

Tailwind CSS Rating

​ Default Rating

​ Non-decimal

​ Decimal

​ Input

​ Colors

​ Sizes

On This Page

Default Rating

Non-decimal

Decimal

Input

Colors

Sizes