Package
LumeoA11yfocus-managedkeyboardradioradiogroupDepends onformlabelTested
Tier 3 · 22 testsView source ↗Rating
A star rating input for collecting feedback.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Rating />
Tested
Tier 3 · A11y + behavior
all components → Render Behavior A11y Keyboard Scale E2E
22 tests across 3 files. Auto-generated from the test suite.
When to Use
- Product or service reviews where users submit star ratings
- Feedback forms for satisfaction or experience scoring
- Displaying average ratings in read-only mode on product cards
- Any scenario requiring a quick visual numeric rating (e.g., difficulty, quality)
Value: 3.5
Pick a size to see the star scale live.
Size: Default — Value: 3
Mobile (rc.49). The star rating now uses pointer events so users can drag a finger across the stars to set a value in one smooth gesture — no need to lift and tap each star individually.
API Reference
Rating
| Prop | Type | Default | Description |
|---|---|---|---|
| Value | double | 0 | The current rating, from 0 up to Max. Two-way bindable via ValueChanged. Fractional .5 values are only meaningful when AllowHalf is set. |
| Max | int | 5 | Number of stars rendered. Default 5. |
| AllowHalf | bool | false | Allows selecting half-star values (clicking an already-selected star toggles it down by 0.5). |
| ReadOnly | bool | false | Disables all interaction (click, drag, keyboard), rendering the stars as a static display. |
| IconContent | RenderFragment? | — | Icon slot. Named IconContent to avoid shadowing the <Icon> component. |
| Size | Lumeo.Size | Lumeo.Size.Md | Star size. Supports all 7 Size values (Xxs–Xxl). Default Md. Sm and Md are padded up to the 24px touch-target minimum (their star glyph itself is unchanged — only the button's hit box grows, which also widens the visible gap between adjacent stars at those two rungs). Xxs and Xs are a deliberate exception: their 8px/12px hit area stays below the 24px minimum on purpose — an app that opts into Xxs/Xs is explicitly asking for a dense, non-touch-primary control, so no padding is added there. Lg/Xl/Xxl already clear 24px without any change. |
| Required | bool | false | Marks the field as required, appending a destructive-colored asterisk to the label (outside a FormField). Purely visual — the widget does not enforce a non-zero selection. |
| Invalid | bool | false | Forces the invalid/error visual state (destructive error text), independent of the ambient FormField's validation state. |
| ErrorText | string? | — | Error message shown below the stars (outside a FormField) when Invalid is set. Takes precedence over HelperText. |
| HelperText | string? | — | Helper text shown below the stars (outside a FormField) when there is no error to display. |
| Label | string? | — | Label text rendered above the stars (outside a FormField, which supplies its own label). |
| Name | string? | — | Field name for form-field integration. Not currently rendered onto the radiogroup markup. |
| Class | string? | — | Additional CSS classes merged onto the star row (the role="radiogroup" element). |
| AdditionalAttributes | Dictionary<string, object>? | — | Captures any unmatched attributes and applies them to the star row (the role="radiogroup" element). |
Events
| ValueChanged | EventCallback<double> | Raised whenever the rating changes, via click, drag, or arrow-key navigation. |