Rating Component

A rating component for selecting a value with interactive icons.

Basic

A simple star rating with default settings.

Value: 0

Half Ratings

Allow half-star ratings for more granular control.

Value: 2.5

Icon Types

Different icon types: Star, Heart, and Circle.

Star:

Value: 3

Heart:

Value: 4

Circle:

Value: 2

Sizes

Small, Medium, and Large sizes.

Small:

Medium:

Large:

Value: 3

Custom Max Rating

Set a custom maximum rating (default is 5).

Value: 5 / 10

Disabled

Disabled state prevents interaction.

Read-Only

Read-only state displays the rating without allowing changes.

Allow Clear

Click the same rating again to clear it (AllowClear is true by default).

Value: 3 (Click the same star twice to clear)

No Clear

Prevent clearing by setting AllowClear to false.

Value: 3

Keyboard Support

Use arrow keys to adjust, number keys (1-5) to set directly, or 0 to clear.

Value: 2

  • Arrow Left/Down: Decrease rating
  • Arrow Right/Up: Increase rating
  • Number keys 1-9: Set rating directly (within MaxRating)
  • 0: Clear rating
An unhandled error has occurred. Reload 🗙