Skip to main content

RatingIndicator

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";

Basic Sample​

Properties​

value​

DescriptionThe 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
Typenumber
Default0

max​

DescriptionThe number of displayed rating symbols.
Typenumber
Default5
Since1.0.0-rc.15

disabled​

DescriptionDefines whether the component is disabled.
Note: A disabled component is completely noninteractive.
Typeboolean
Defaultfalse

readonly​

DescriptionDefines whether the component is read-only.
Note: A read-only component is not editable, but still provides visual feedback upon user interaction.
Typeboolean
Defaultfalse

accessibleName​

DescriptionDefines the accessible ARIA name of the component.
Typestring
Default""
Since1.0.0-rc.15

accessibleNameRef​

DescriptionReceives id(or many ids) of the elements that label the component.
Typestring
Default""
Since1.15.0

required​

DescriptionDefines whether the component is required.
Typeboolean
Defaultfalse
Since1.15.0

tooltip​

DescriptionDefines the tooltip of the component.
Typestring
Default""
Since1.19.0

Slots​

No slots available for this component.

Events​

change​

DescriptionThe event is fired when the value changes.
TypeCustomEvent

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.