RatingIndicator

<ui5-rating-indicator> | Since 1.0.0-rc.8

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

Description	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
Type	number
Default	0

max

Description	The number of displayed rating symbols.
Type	number
Default	5
Since	1.0.0-rc.15

size

Description	Defines the size of the component.
Type	"S" | "M" | "L"
Default	"M"
Since	2.6.0

disabled

Description	Defines whether the component is disabled. Note: A disabled component is completely noninteractive.
Type	boolean
Default	false

readonly

Description	Defines whether the component is read-only. Note: A read-only component is not editable, but still provides visual feedback upon user interaction.
Type	boolean
Default	false

accessibleName

Description	Defines the accessible ARIA name of the component.
Type	string | undefined
Default	undefined
Since	1.0.0-rc.15

accessibleNameRef

Description	Receives id(or many ids) of the elements that label the component.
Type	string | undefined
Default	undefined
Since	1.15.0

required

Description	Defines whether the component is required.
Type	boolean
Default	false
Since	1.15.0

tooltip

Description	Defines the tooltip of the component.
Type	string | undefined
Default	undefined
Since	1.19.0

Slots

No slots available for this component.

Events

change

Description	The event is fired when the value changes.
Type	CustomEvent
Bubbles	Yes
Cancelable	No

Methods

No methods available for this component.

CSS Parts

No CSS parts available for this component.

More Samples

Sizes

The RatingIndicator supports several sizes of the Icons (S, M and L).