Rating

Ready

Star rating input with multiple variants and half-value support

Interactive Preview

Click the stars to rate

3 / 5

Variants

Three icon variants: star, heart, and thumbs

Star (default)

3 / 5

Heart

4 / 5

Thumbs Up

2 / 5

Sizes

Four size options: sm, md, lg, and xl

Small

4 / 5

Medium (default)

4 / 5

Large

4 / 5

Extra Large

4 / 5

Half Rating

Allow half-star ratings with precise control

3.5 / 5
Click on left half of star for 0.5 increments

Current value: 3.5

States

Different states for various use cases

Read Only

4 / 5

Disabled

3 / 5

With Error

Please select a rating

Custom Colors

Override default colors with custom ones

Green Theme

4 / 5

Purple Theme

3 / 5

Custom Maximum

Change the maximum rating value

10 Stars

7 / 10

3 Hearts

2 / 3

Usage

How to use the Rating component

// Basic rating
<Rating value={rating} onChange={setRating} />
// With label and value display
<Rating
label="Rate this product"
value={rating}
onChange={setRating}
showValue
size="lg"
/>
// Half-star rating
<Rating
value={rating}
onChange={setRating}
allowHalf
variant="heart"
/>

API Reference

Props

value-number - Current rating value
onChange-(value: number) => void - Callback when rating changes
max-number - Maximum rating value (default: 5)
size-"sm" | "md" | "lg" | "xl" (default: "md")
variant-"star" | "heart" | "thumbs" (default: "star")
allowHalf-boolean - Allow half-value selection (default: false)
showValue-boolean - Display numeric value (default: false)
disabled-boolean - Disable interaction (default: false)
readOnly-boolean - Make read-only (default: false)
label-string - Label text
error-string - Error message
helperText-string - Helper text
emptyColor-string - Custom empty state color (Tailwind class)
fillColor-string - Custom fill color (Tailwind class)
hoverColor-string - Custom hover color (Tailwind class)