Rating Component

Star rating control using SVG mask on input[type=radio]. Supports connected mode (default), radio mode, half-star, custom icons, and dynamic colors.

Notes

Basic usage

Connected mode (default)

Radio mode (rating-radio)

Static display (data-role=item)

With labels

Sizes (rating-4 ~ rating-15)

16px (rating-4)

20px (rating-5)

24px (rating-6)

28px (rating-7)

32px (rating-8, default)

36px (rating-9)

40px (rating-10)

44px (rating-11)

48px (rating-12)

52px (rating-13)

56px (rating-14)

60px (rating-15)

Width modifiers

rating-full (fill container)

Bad
Okay
Good
Great
Excellent

rating-scale (fixed width)

Bad
Okay
Good
Great
Excellent

rating-ratio-8 (8x height)

Bad
Okay
Good
Great
Excellent

rating-gutter / rating-gutter-6

Theme colors

Primary / Secondary / Tertiary

Success / Error / Info

Highlight / Warning / Caution

Ink / Title / Description / Caption / Disabled

Custom colors

Multiple color formats are supported:

Tailwind + raw colors

Per-item custom color (--custom-item-color)

Half-star mode

Wrap two input[type=radio] inside a <span> for half-star precision.

Score: 1.5

Custom icon (--rating-mask-image)

Replace the star with a custom SVG mask via --rating-mask-image.

Bad
Okay
Good
Great
Excellent