Rating
A star rating component with half-value support, custom icons, read-only display, and full keyboard navigation. Ideal for product reviews, feedback forms, content quality indicators, and any interface where users need to express a numeric score visually.
Default
The default
Rating renders 5 star icons with click-to-select behaviour. Bind to a double with @bind-Value for two-way data binding. Clicking a star sets the rating to that value, and clicking the current value clears it (controlled by AllowClear).Half Rating
Set
AllowHalf to true to enable half-star precision. Hovering over the left or right half of each icon highlights accordingly. This provides finer granularity for ratings where a whole-number scale feels too coarse, common in movie and restaurant review systems.Different Icons
Use the
Icon parameter to switch between Star, Heart, and Circle icon types. Each icon type renders both filled and outline variants to clearly distinguish selected from unselected states. Choose the icon that best matches the rating context — hearts for favourites, circles for neutral scales.Size Variants
Control the icon dimensions with the
Size parameter. Available sizes are Small (inline indicators), Default (standard forms), and Large (hero sections and touch-friendly interfaces). The icon size and spacing scale proportionally with each variant.Custom Colors
Customize the filled and empty icon colours with
ActiveColor and InactiveColor. These accept any valid CSS colour value including hex, RGB, and named colours. This allows the rating to match your brand palette or indicate sentiment (e.g. gold for positive, grey for neutral).Custom Maximum
Use the
Max parameter to set a different maximum rating value. This example uses a 10-point scale, which is common for detailed review systems. The component renders the specified number of icons and adjusts keyboard navigation accordingly.Read-Only
Set
ReadOnly to true to display a rating without user interaction. The icons render without hover effects or pointer cursor, making them suitable for showing average ratings, review summaries, or computed scores. Combine with AllowHalf for fractional display.Custom Variant
Use the
Class parameter to apply custom Tailwind CSS classes to the rating container. This example demonstrates custom spacing and a background wrapper, useful for embedding ratings in cards or sections where additional visual context is needed.Disabled
Set
Disabled to true to prevent user interaction. Disabled ratings have reduced opacity and do not respond to click, hover, or keyboard events, making them suitable for locked form fields or temporarily unavailable rating controls.Product Review
A real-world composition showing the
Rating in a product review card with a title, text area, and submit button. The half-star precision allows detailed feedback, and the rating value is displayed alongside the stars to reinforce the selection.