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="10" value="5"></ui5-rating-indicator>
<ui5-rating-indicator max="3" value="3"></ui5-rating-indicator>
	

Disabled Rating Indicator

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

Readonly Rating Indicator

<ui5-rating-indicator value="4" readonly></ui5-rating-indicator>
<ui5-rating-indicator max="7" value="5" readonly></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 recommended 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>

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
accessibleName
accessible-name
String
Sets the accessible aria name of the component.
since v1.0.0-rc.15
disabled
boolean
false
Defines whether the component is disabled.

Note: A disabled component is completely noninteractive.
max
Integer
5
The number of displayed rating symbols.
since v1.0.0-rc.15
readonly
boolean
false
Defines whether the component is read-only.

Note: A read-only component 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 Horizon
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel