UI5 Web Components
Search

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>

Keyboard Handling

When the ui5-rating-indicator is focused, the user can change the rating with the following keyboard shortcuts:
  • [RIGHT/UP] - Increases the value of the rating by one step. If the highest value is reached, does nothing
  • [LEFT/DOWN] - Decreases the value of the rating by one step. If the lowest value is reached, does nothing.
  • [HOME] - Sets the lowest value.
  • [END] - Sets the highest value.
  • [SPACE/ENTER/RETURN] - Increases the value of the rating by one step. If the highest value is reached, sets the rating to the lowest value.
  • Any number - Changes value to the corresponding number. If typed number is larger than the number of values, sets the highest value.

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
Defines 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: Morning Horizon (Light) Evening Horizon (Dark) Horizon High Contrast Black Horizon High Contrast White Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel