RatingField

Star-based rating input. Renders a group of buttons as a WAI-ARIA radio group, so rating selection is fully keyboard and screen reader accessible. Defaults to a 5-star scale but supports any maximum.

Basic Usage

<ArcadiaForm Model="model">
    <RatingField Field="@nameof(Model.Score)" Label="Rate your experience" />
</ArcadiaForm>

Custom Scale

<RatingField Field="@nameof(Model.Score)"
             Label="Detailed score"
             MaxRating="10" />

Required (no clear button)

<RatingField Field="@nameof(Model.Score)"
             Label="Rating required"
             Required="true"
             ShowClear="false" />

Parameters

ParameterTypeDefaultDescription
Valueint0Current rating (0 means unrated). Two-way bindable.
ValueChangedEventCallback<int>—Fires when the rating changes.
MaxRatingint5Highest selectable value (number of stars rendered).
ShowClearbooltrueWhether the clear (✕) button appears once a rating is set.

Inherited from FieldBase

ParameterTypeDescription
Labelstring?Visible field label.
HelperTextstring?Guidance text below the field.
RequiredboolMarks the field as required.
DisabledboolDisables user interaction.
ErrorsIReadOnlyList<string>?Validation messages to display.

Accessibility

  • Wrapped in role="radiogroup" with aria-labelledby pointing to the label
  • Each star is role="radio" with aria-checked state
  • Each star has aria-label="{rating} of {MaxRating}" for screen readers
  • aria-required and aria-invalid reflect validation state
  • Error messages linked via aria-describedby