Rating Indicator

v1.0.0-rc.8
@ui5/webcomponents
<ui5-rating-indicator>

Basic Rating Indicator

<ui5-rating-indicator></ui5-rating-indicator>
<ui5-rating-indicator value="3"></ui5-rating-indicator>
<ui5-rating-indicator value="3.7"></ui5-rating-indicator>
	

Rating Indicator With Different Max Value

<ui5-rating-indicator max-value="10" value="5"></ui5-rating-indicator>
<ui5-rating-indicator max-value="3" value="3"></ui5-rating-indicator>
	

Disabled Rating Indicator

<ui5-rating-indicator value="4" disabled></ui5-rating-indicator>
<ui5-rating-indicator max-value="10" value="5" disabled></ui5-rating-indicator>
<ui5-rating-indicator max-value="3" value="3" disabled></ui5-rating-indicator>
	

Overview

The rating indicator is used to display a specific number of icons that are used to rate an item. Additionally, it is also used to display the average and overall ratings.

Usage

The reccomended number of icons is between 5 and 7.

Responsive Behavior

You can change the size of the Rating Indicator by changing its font-size CSS property.
Example: <ui5-rating-indicator style="font-size: 3rem;"></ui5-rating-indicator>

Usage

For the ui5-rating-indicator

ES6 Module Import

import @ui5/webcomponents/dist/RatingIndicator.js";

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
disabled
boolean
false
Defines whether the ui5-rating-indicator is disabled.

Note: A disabled ui5-rating-indicator is completely noninteractive.
maxValue
max-value
Integer
5
The number of displayed rating symbols
readonly
boolean
false
Defines whether the ui5-rating-indicator is read-only.

Note: A read-only ui5-rating-indicator is not editable, but still provides visual feedback upon user interaction.
value
Float
0
The indicated value of the rating

Note: If you set a number which is not round, it would be shown as follows:
  • 1.0 - 1.2 -> 1
  • 1.3 - 1.7 -> 1.5
  • 1.8 - 1.9 -> 2

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
change
The event is fired when the value changes.
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel