Rating

The Rating component displays an interactive set of icons (such as stars) for users to select a rating value. It supports fractional ratings, custom shapes, color variants, and size options for flexible UI integration.

Basic Usage

0
Code Example
Basic.vue
Rating
The Rating component displays a row of icons (such as stars) that allow users to select a value. Supports fractional ratings, custom shapes, color variants, and sizes.
Rating Props  Type  Description 
modelValue
number | string

v-model

The current rating value.

count
number | string
The total number of rating icons to display. 
default: 5
half
boolean
Allows selection of half values (e.g., 3.5).
disabled
boolean
Disables interaction and dims the component.
bg
string
Custom background color class for icons.
color
string
Sets the color theme. Options: neutral, primary, secondary, accent, info, success, warning, error.
   
neutral
boolean
Shortcut for color='neutral'.
   
primary
boolean
Shortcut for color='primary'.
   
secondary
boolean
Shortcut for color='secondary'.
   
accent
boolean
Shortcut for color='accent'.
   
info
boolean
Shortcut for color='info'.
   
success
boolean
Shortcut for color='success'.
   
warning
boolean
Shortcut for color='warning'.
   
error
boolean
Shortcut for color='error'.
shape
string
Sets the icon shape. Options: star, star-2, squircle, heart, hexagon, hexagon-2, decagon, pentagon, diamond, square, circle, triangle, triangle-2, triangle-3, triangle-4.
   
squircle
boolean
Shortcut for shape='squircle'.
   
heart
boolean
Shortcut for shape='heart'.
   
hexagon
boolean
Shortcut for shape='hexagon'.
   
hexagon2
boolean
Shortcut for shape='hexagon-2'.
   
decagon
boolean
Shortcut for shape='decagon'.
   
pentagon
boolean
Shortcut for shape='pentagon'.
   
diamond
boolean
Shortcut for shape='diamond'.
   
square
boolean
Shortcut for shape='square'.
   
circle
boolean
Shortcut for shape='circle'.
   
star
boolean
Shortcut for shape='star'.
   
star2
boolean
Shortcut for shape='star-2'.
   
triangle
boolean
Shortcut for shape='triangle'.
   
triangle2
boolean
Shortcut for shape='triangle-2'.
   
triangle3
boolean
Shortcut for shape='triangle-3'.
   
triangle4
boolean
Shortcut for shape='triangle-4'.
size
'xl' | 'lg' | 'md' | 'sm' | 'xs'

Sets the icon size. 
Options: xl, lg, md, sm, xs.
   
xl
boolean
Shortcut for size='xl'.
   
lg
boolean
Shortcut for size='lg'.
   
md
boolean
Shortcut for size='md'.
   
sm
boolean
Shortcut for size='sm'.
   
xs
boolean
Shortcut for size='xs'.
Rating Events  Arguments  Description 
update:modelValue

v-model

Emitted when the user selects a new rating value.

Examples
Color
Rating components with different color variants.
0
 neutral 
 primary 
 secondary 
 accent 
 info 
 success 
 warning 
 error 
 Code Example 
Color.vue
Count
Custom number of rating icons.
 count="9" 
 Code Example 
Count.vue
Disabled
A disabled rating component.
0
 Code Example 
Disabled.vue
Half
Fractional (half) ratings.
2
 Code Example 
Half.vue
Shape
Different rating icon shapes.
2
 squircle 
 heart 
 hexagon 
 hexagon-2 
 decagon 
 pentagon 
 diamond 
 square 
 circle 
 star 
 star-2 
 triangle 
 triangle-2 
 triangle-3 
 triangle-4 
 Code Example 
Shape.vue
Size
Different rating icon sizes.
0
 xs 
 sm 
 md 
 lg 
 xl 
 Code Example 
Size.vue
DaisyUI Kit 🌼