ComponentsInputs and forms
Rating
A row of icons for giving or showing a score, usually out of five. Use it for quick opinions and for displaying averages; ask for written feedback separately when the reason matters.
Giving a rating
Bind SelectedValue. Clicking the current value again clears it to zero, and the arrow keys change it.
How was your sourdough?
You gave it 4 of 5.
Every size and color
Size against Color, on a three-icon scale to keep the table compact. FullIconColor and EmptyIconColor override the two halves separately.
| Size ↓ · Color → | Default | Primary | Secondary | Tertiary | Info | Success | Warning | Error | Dark | Transparent | Inherit | Surface |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Small | ||||||||||||
| Medium | ||||||||||||
| Large |
Scales other than five
MaxValue sets the number of icons. Short scales suit yes-or-no style questions; ten points suit careful scoring.
Would you order again? (3)
Crumb structure, judged out of 10
7 / 10
Custom icons
FullIcon and EmptyIcon accept any icon. Pick shapes that read as a scale, and keep a text summary nearby.
Spiciness: 2 of 4
Would recommend: 4 of 5
Hover feedback in a review form
HoveredValueChanged reports the value under the pointer, so a label can describe each score before it is chosen.
Review: The Patient Telescope
Choose a score
Read-only and disabled
Read-only ratings display a score, such as an average, without inviting a click. Disabled ratings are dimmed and skipped by the keyboard.
Average of 128 reviews
4.3 out of 5
Rate after delivery
Available once your order arrives.
Playground
Change any parameter; the markup below updates with only the values that differ from the defaults.
<MudRating @bind-SelectedValue="_score" Color="Color.Warning" />