Chuyển đến nội dung chính
Frutjam logo Frutjam
v2.2.2
Theme

Rating Component

CSS-only Tailwind CSS star and heart rating component. Sizes xs–xl, half-star support, no JavaScript required. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

Rating components allow users to provide feedback by assigning star or numeric ratings to products, services, or content. Built with semantic HTML inputs and interactive styling, ratings communicate user satisfaction and quality feedback. The Frutjam rating system supports multiple styles, colors, and sizes—ideal for product reviews, user feedback forms, and satisfaction surveys.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

Lớp học Kiểu Sự miêu tả
ratingCăn cứContainer for a set of radio-based rating inputs
rateCông cụ sửa đổiIndividual star/icon input element
rating-halfCông cụ sửa đổiEnables half-star selection
rating-xsKích cỡExtra small (1rem stars)
rating-smKích cỡSmall (1.25rem stars)
rating-mdKích cỡMedium (1.5rem stars, default)
rating-lgKích cỡLarge (2rem stars)
rating-xlKích cỡExtra large (2.5rem stars)
rate-primaryMàu sắcMàu chủ đề chính
rate-secondaryMàu sắcMàu chủ đề phụ
rate-accentMàu sắcMàu chủ đề nhấn mạnh
rate-neutralMàu sắcMàu chủ đề trung tính
rate-infoMàu sắcMàu sắc ngữ nghĩa thông tin
rate-successMàu sắcMàu ngữ nghĩa thành công
rate-warningMàu sắcMàu ngữ nghĩa cảnh báo
rate-errorMàu sắcLỗi ngữ nghĩa màu sắc

Cách sử dụng cơ bản

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

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

Rating Shapes

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<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 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<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 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<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 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<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

5 out of 5
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<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 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<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>