Rating
A <FluentRating> component allows users to provide a rating for a particular item.
<FluentRating> allows customers to determine a sense of value of a good or a service.
By default, the rating is selected out of 5 stars, but the number and symbol used can be customized.
Accessibility
You can use the arrow keys to increase (→ / ↑) or decrease (← / ↓) the value.
Examples
Default
Rate our product!
Download:
Customization
Example
Value: 2
Download:
Documentation
FluentRating Class
Inherits from FluentInputBase<>.
There might be parameters and/or methods shown here that are inherited from the component's base type but are not applicable to this component.
Parameters
Name | Type | Default | Description |
|---|---|---|---|
AllowReset | bool | False | Gets or sets a value that whether to allow clear when click again. |
AriaLabel | string? | Gets or sets the text used on aria-label attribute. | |
Autofocus | bool | False | Determines if the element should receive document focus on page load. |
Disabled | bool | False | Disables the form control, ensuring it doesn't participate in form submission. |
DisplayName | string? | Gets or sets the display name for this field. | |
Embedded | bool | False | Gets or sets if the derived component is embedded in another component. If true, the ClassValue property will not include the EditContext's FieldCssClass. |
Field | FieldIdentifier? | Gets or sets the FluentInputBase that identifies the bound value.If set, this parameter takes precedence over FluentInputBase. | |
IconColor | Color? | Gets or sets the icon drawing and fill color. Value comes from the Color enumeration. Defaults to Accent. | |
IconCustomColor | string? | Gets or sets the icon drawing and fill color to a custom value. Needs to be formatted as an HTML hex color string (#rrggbb or #rgb) or CSS variable. ⚠️ Only available when Color is set to Color.Custom. | |
IconFilled | Icon | Preview:
| The icon to display when the rating value is greater than or equal to the item's value. |
IconOutline | Icon | Preview:
| The icon to display when the rating value is less than the item's value. |
IconWidth | string | 28px | The icon width. |
Immediate | bool | False | Change the content of this input field when the user write text (based on 'OnInput' HTML event). |
ImmediateDelay | int | 0 | Gets or sets the delay, in milliseconds, before to raise the FluentInputBase event. |
Label | string? | Gets or sets the text to label the input. This is usually displayed just above the input | |
LabelTemplate | RenderFragment? | Gets or sets the content to label the input component. This is usually displayed just above the input | |
Max | int | 5 | Gets or sets the number of elements. |
Name | string? | Gets or sets the name of the element. Allows access by name from the associated form. ⚠️ This value needs to be set manually for SSR scenarios to work correctly. | |
Placeholder | string? | Gets or sets the short hint displayed in the input before the user enters a value. | |
ReadOnly | bool | False | When true, the control will be immutable by user interaction. readonly HTML attribute for more information. |
Required | bool | False | Gets or sets a value indicating whether the element needs to have a value. |
Value | int | 0 | Gets or sets the value of the input. This should be used with two-way binding. |
ValueExpression | Expression<Func<int>>? | Gets or sets an expression that identifies the bound value. |
EventCallbacks
Name | Type | Description |
|---|---|---|
OnHoverValueChanged | EventCallback<int?> | Fires when hovered value changes. Value will be null if no rating item is hovered. |
ValueChanged | EventCallback<int> | Gets or sets a callback that updates the bound value. |
Methods
Name | Parameters | Type | Description |
|---|---|---|---|
FocusAsync | void | Exposes the elements FocusAsync(bool preventScroll) method. | |
FocusAsync | bool preventScroll | void | Exposes the elements FocusAsync(bool preventScroll) method. |