---
title: "Rating"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Rating using native HTML inputs. Custom star counts, sizes, and colors with half-star and read-only support for reviews and feedback forms."
url: https://frutjam.com/pl/components/rating
---

# Rating Component

Komponenty ocen pozwalają użytkownikom przekazywać opinie poprzez przypisywanie gwiazdek lub ocen liczbowych produktom, usługom lub treściom. Oceny, zbudowane na podstawie semantycznych danych wejściowych HTML i interaktywnej stylistyki, wyrażają zadowolenie użytkowników i opinie dotyczące jakości. System ocen Frutjam obsługuje wiele stylów, kolorów i rozmiarów — idealnie nadaje się do recenzji produktów, formularzy opinii użytkowników i ankiet satysfakcji.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

| Klasa          | Typ         | Opis                                                    |
| -------------- | ----------- | ------------------------------------------------------- |
| rating         | Opierać     | Kontener na zestaw radiowych danych wejściowych oceny   |
| rate           | Modyfikator | Indywidualny element wejściowy w postaci gwiazdki/ikony |
| rating-half    | Modyfikator | Umożliwia wybór półgwiazdkowy                           |
| rating-xs      | Rozmiar     | Bardzo małe (gwiazdki 1rem)                             |
| rating-sm      | Rozmiar     | Mały (gwiazdki 1,25 REM)                                |
| rating-md      | Rozmiar     | Średni (gwiazdki 1,5 rem, domyślnie)                    |
| rating-lg      | Rozmiar     | Duży (2rem gwiazdki)                                    |
| rating-xl      | Rozmiar     | Bardzo duży (gwiazdki 2,5 rem)                          |
| rate-primary   | Kolor       | Podstawowy kolor motywu                                 |
| rate-secondary | Kolor       | Kolor motywu drugorzędnego                              |
| rate-accent    | Kolor       | Kolor motywu akcentującego                              |
| rate-neutral   | Kolor       | Neutralny kolor motywu                                  |
| rate-info      | Kolor       | Kolor semantyczny informacji                            |
| rate-success   | Kolor       | Sukces semantyczny kolor                                |
| rate-warning   | Kolor       | Ostrzeżenie kolor semantyczny                           |
| rate-error     | Kolor       | Błąd koloru semantycznego                               |

## Podstawowe użycie

## Rating Shapes

```html
<div class="rating">
  <input type="radio" name="shape-star" class="rate mask mask-star rate-warning" value="1">
  <input type="radio" name="shape-star" class="rate mask mask-star rate-warning" value="2">
  <input type="radio" name="shape-star" class="rate mask mask-star rate-warning" value="3" checked>
  <input type="radio" name="shape-star" class="rate mask mask-star rate-warning" value="4">
  <input type="radio" name="shape-star" class="rate mask mask-star rate-warning" value="5">
</div>

<div class="rating">
  <input type="radio" name="shape-star2" class="rate mask mask-star-2 rate-warning" value="1">
  <input type="radio" name="shape-star2" class="rate mask mask-star-2 rate-warning" value="2">
  <input type="radio" name="shape-star2" class="rate mask mask-star-2 rate-warning" value="3" checked>
  <input type="radio" name="shape-star2" class="rate mask mask-star-2 rate-warning" value="4">
  <input type="radio" name="shape-star2" class="rate mask mask-star-2 rate-warning" value="5">
</div>

<div class="rating">
  <input type="radio" name="shape-heart" class="rate mask mask-heart rate-error" value="1">
  <input type="radio" name="shape-heart" class="rate mask mask-heart rate-error" value="2">
  <input type="radio" name="shape-heart" class="rate mask mask-heart rate-error" value="3">
  <input type="radio" name="shape-heart" class="rate mask mask-heart rate-error" value="4" checked>
  <input type="radio" name="shape-heart" class="rate mask mask-heart rate-error" value="5">
</div>

<div class="rating">
  <input type="radio" name="shape-circle" class="rate mask mask-circle rate-primary" value="1">
  <input type="radio" name="shape-circle" class="rate mask mask-circle rate-primary" value="2">
  <input type="radio" name="shape-circle" class="rate mask mask-circle rate-primary" value="3" checked>
  <input type="radio" name="shape-circle" class="rate mask mask-circle rate-primary" value="4">
  <input type="radio" name="shape-circle" class="rate mask mask-circle rate-primary" value="5">
</div>

<div class="rating">
  <input type="radio" name="shape-diamond" class="rate mask mask-diamond rate-accent" value="1">
  <input type="radio" name="shape-diamond" class="rate mask mask-diamond rate-accent" value="2">
  <input type="radio" name="shape-diamond" class="rate mask mask-diamond rate-accent" value="3" checked>
  <input type="radio" name="shape-diamond" class="rate mask mask-diamond rate-accent" value="4">
  <input type="radio" name="shape-diamond" class="rate mask mask-diamond rate-accent" value="5">
</div>

<div class="rating">
  <input type="radio" name="shape-squircle" class="rate mask mask-squircle rate-secondary" value="1">
  <input type="radio" name="shape-squircle" class="rate mask mask-squircle rate-secondary" value="2">
  <input type="radio" name="shape-squircle" class="rate mask mask-squircle rate-secondary" value="3" checked>
  <input type="radio" name="shape-squircle" class="rate mask mask-squircle rate-secondary" value="4">
  <input type="radio" name="shape-squircle" class="rate mask mask-squircle rate-secondary" value="5">
</div>

<div class="rating">
  <input type="radio" name="shape-hexagon" class="rate mask mask-hexagon rate-success" value="1">
  <input type="radio" name="shape-hexagon" class="rate mask mask-hexagon rate-success" value="2">
  <input type="radio" name="shape-hexagon" class="rate mask mask-hexagon rate-success" value="3" checked>
  <input type="radio" name="shape-hexagon" class="rate mask mask-hexagon rate-success" value="4">
  <input type="radio" name="shape-hexagon" class="rate mask mask-hexagon rate-success" value="5">
</div>
```

## Half Rating

```html
<div class="rating rating-half">
  <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="0.5">
  <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="1">
  <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="1.5">
  <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="2">
  <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="2.5" checked>
  <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="3">
  <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="3.5">
  <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="4">
  <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="4.5">
  <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="5">
</div>

<div class="rating rating-half">
  <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="0.5">
  <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="1">
  <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="1.5">
  <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="2">
  <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="2.5">
  <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="3" checked>
  <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="3.5">
  <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="4">
  <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="4.5">
  <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="5">
</div>

<div class="rating rating-half">
  <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="0.5">
  <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="1">
  <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="1.5">
  <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="2">
  <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="2.5" checked>
  <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="3">
  <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="3.5">
  <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="4">
  <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="4.5">
  <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="5">
</div>
```

## Display Only

Use `aria-checked="true"` on the last filled item — CSS fills all previous automatically.

```html
<div class="rating" aria-label="3 out of 5 stars">
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="true"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
</div>

<div class="rating" aria-label="4 out of 5 hearts">
  <div class="rate mask mask-heart rate-error" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-heart rate-error" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-heart rate-error" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-heart rate-error" role="radio" aria-checked="true"></div>
  <div class="rate mask mask-heart rate-error" role="radio" aria-checked="false"></div>
</div>

<div class="rating rating-half" aria-label="2.5 out of 5 stars">
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="true"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
</div>
```

## Rating Colors

```html
<div class="rating">
  <input type="radio" name="rc1" class="rate mask mask-star rate-primary" value="1">
  <input type="radio" name="rc1" class="rate mask mask-star rate-primary" value="2">
  <input type="radio" name="rc1" class="rate mask mask-star rate-primary" value="3">
  <input type="radio" name="rc1" class="rate mask mask-star rate-primary" value="4" checked>
  <input type="radio" name="rc1" class="rate mask mask-star rate-primary" value="5">
</div>

<div class="rating">
  <input type="radio" name="rc2" class="rate mask mask-star rate-secondary" value="1">
  <input type="radio" name="rc2" class="rate mask mask-star rate-secondary" value="2">
  <input type="radio" name="rc2" class="rate mask mask-star rate-secondary" value="3" checked>
  <input type="radio" name="rc2" class="rate mask mask-star rate-secondary" value="4">
  <input type="radio" name="rc2" class="rate mask mask-star rate-secondary" value="5">
</div>

<div class="rating">
  <input type="radio" name="rc3" class="rate mask mask-star rate-accent" value="1">
  <input type="radio" name="rc3" class="rate mask mask-star rate-accent" value="2">
  <input type="radio" name="rc3" class="rate mask mask-star rate-accent" value="3" checked>
  <input type="radio" name="rc3" class="rate mask mask-star rate-accent" value="4">
  <input type="radio" name="rc3" class="rate mask mask-star rate-accent" value="5">
</div>

<div class="rating">
  <input type="radio" name="rc4" class="rate mask mask-star rate-neutral" value="1">
  <input type="radio" name="rc4" class="rate mask mask-star rate-neutral" value="2">
  <input type="radio" name="rc4" class="rate mask mask-star rate-neutral" value="3" checked>
  <input type="radio" name="rc4" class="rate mask mask-star rate-neutral" value="4">
  <input type="radio" name="rc4" class="rate mask mask-star rate-neutral" value="5">
</div>

<div class="rating">
  <input type="radio" name="rc5" class="rate mask mask-star rate-info" value="1">
  <input type="radio" name="rc5" class="rate mask mask-star rate-info" value="2">
  <input type="radio" name="rc5" class="rate mask mask-star rate-info" value="3" checked>
  <input type="radio" name="rc5" class="rate mask mask-star rate-info" value="4">
  <input type="radio" name="rc5" class="rate mask mask-star rate-info" value="5">
</div>

<div class="rating">
  <input type="radio" name="rc6" class="rate mask mask-star rate-success" value="1">
  <input type="radio" name="rc6" class="rate mask mask-star rate-success" value="2">
  <input type="radio" name="rc6" class="rate mask mask-star rate-success" value="3" checked>
  <input type="radio" name="rc6" class="rate mask mask-star rate-success" value="4">
  <input type="radio" name="rc6" class="rate mask mask-star rate-success" value="5">
</div>

<div class="rating">
  <input type="radio" name="rc7" class="rate mask mask-star rate-warning" value="1">
  <input type="radio" name="rc7" class="rate mask mask-star rate-warning" value="2">
  <input type="radio" name="rc7" class="rate mask mask-star rate-warning" value="3" checked>
  <input type="radio" name="rc7" class="rate mask mask-star rate-warning" value="4">
  <input type="radio" name="rc7" class="rate mask mask-star rate-warning" value="5">
</div>

<div class="rating">
  <input type="radio" name="rc8" class="rate mask mask-heart rate-error" value="1">
  <input type="radio" name="rc8" class="rate mask mask-heart rate-error" value="2">
  <input type="radio" name="rc8" class="rate mask mask-heart rate-error" value="3" checked>
  <input type="radio" name="rc8" class="rate mask mask-heart rate-error" value="4">
  <input type="radio" name="rc8" class="rate mask mask-heart rate-error" value="5">
</div>
```

## Rating Sizes

```html
<div class="rating rating-xs">
  <input type="radio" name="rs1" class="rate mask mask-star rate-warning" value="1">
  <input type="radio" name="rs1" class="rate mask mask-star rate-warning" value="2">
  <input type="radio" name="rs1" class="rate mask mask-star rate-warning" value="3" checked>
  <input type="radio" name="rs1" class="rate mask mask-star rate-warning" value="4">
  <input type="radio" name="rs1" class="rate mask mask-star rate-warning" value="5">
</div>

<div class="rating rating-sm">
  <input type="radio" name="rs2" class="rate mask mask-star rate-warning" value="1">
  <input type="radio" name="rs2" class="rate mask mask-star rate-warning" value="2">
  <input type="radio" name="rs2" class="rate mask mask-star rate-warning" value="3" checked>
  <input type="radio" name="rs2" class="rate mask mask-star rate-warning" value="4">
  <input type="radio" name="rs2" class="rate mask mask-star rate-warning" value="5">
</div>

<div class="rating rating-md">
  <input type="radio" name="rs3" class="rate mask mask-star rate-warning" value="1">
  <input type="radio" name="rs3" class="rate mask mask-star rate-warning" value="2">
  <input type="radio" name="rs3" class="rate mask mask-star rate-warning" value="3" checked>
  <input type="radio" name="rs3" class="rate mask mask-star rate-warning" value="4">
  <input type="radio" name="rs3" class="rate mask mask-star rate-warning" value="5">
</div>

<div class="rating rating-lg">
  <input type="radio" name="rs4" class="rate mask mask-star rate-warning" value="1">
  <input type="radio" name="rs4" class="rate mask mask-star rate-warning" value="2">
  <input type="radio" name="rs4" class="rate mask mask-star rate-warning" value="3" checked>
  <input type="radio" name="rs4" class="rate mask mask-star rate-warning" value="4">
  <input type="radio" name="rs4" class="rate mask mask-star rate-warning" value="5">
</div>

<div class="rating rating-xl">
  <input type="radio" name="rs5" class="rate mask mask-star rate-warning" value="1">
  <input type="radio" name="rs5" class="rate mask mask-star rate-warning" value="2">
  <input type="radio" name="rs5" class="rate mask mask-star rate-warning" value="3" checked>
  <input type="radio" name="rs5" class="rate mask mask-star rate-warning" value="4">
  <input type="radio" name="rs5" class="rate mask mask-star rate-warning" value="5">
</div>
```

## Read-only Rating

```html
<div class="flex gap-2 items-center">
  <div class="rating rating-sm" aria-label="5 out of 5 stars">
    <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
    <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
    <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
    <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
    <div class="rate mask mask-star rate-warning" role="radio" aria-checked="true"></div>
  </div>
  <span class="text-sm">5 out of 5</span>
</div>
```

## Rating with Label

```html
<label>
  <span class="block text-sm font-medium mb-2">Rate your experience</span>
  <div class="rating">
    <input type="radio" name="experience" class="rate mask mask-star rate-warning" value="1">
    <input type="radio" name="experience" class="rate mask mask-star rate-warning" value="2">
    <input type="radio" name="experience" class="rate mask mask-star rate-warning" value="3">
    <input type="radio" name="experience" class="rate mask mask-star rate-warning" value="4">
    <input type="radio" name="experience" class="rate mask mask-star rate-warning" value="5">
  </div>
</label>
```