A rating component that allows users to view and provide ratings using customizable symbols. It supports fractional values, hover previews, keyboard navigation, single-selection mode, and integrates with forms as a number input.
Slots
symbol — Slot for projecting custom `igc-rating-symbol` elements. When used, the number of symbols determines the `max` value.
value-label — Slot for custom content displayed alongside the rating value.
CSS Parts
base — The main wrapper which holds all of the rating elements.
label — The label part.
value-label — The value label part.
symbols — A wrapper for all rating symbols.
symbol — The part of the encapsulated default symbol.
full — The part of the encapsulated full symbols.
empty — The part of the encapsulated empty symbols.

Properties

Section titled "Properties"

allowReset

Section titled "allowReset"

Whether to reset the rating when the user selects the same value.

 
allowReset: boolean

hoverPreview

Section titled "hoverPreview"

Sets hover preview behavior for the component

 
hoverPreview: boolean

label

Section titled "label"

The label of the control.

 
label: string | undefined

max

Section titled "max"

The maximum value for the rating.

If there are projected symbols, the maximum value will be resolved based on the number of symbols.

 
max: number

readOnly

Section titled "readOnly"

Makes the control a readonly field.

 
readOnly: boolean

single

Section titled "single"

Toggles single selection visual mode.

 
single: boolean

step

Section titled "step"

The minimum value change allowed.

Valid values are in the interval between 0 and 1 inclusive.

 
step: number

value

Section titled "value"

The current value of the component

 
value: number

valueFormat

Section titled "valueFormat"

A format string which sets aria-valuetext. Instances of '{0}' will be replaced with the current value of the control and instances of '{1}' with the maximum value for the control.

Important for screen-readers and useful for localization.

 
valueFormat: string | undefined

Methods

Section titled "Methods"

stepDown

Section titled "stepDown"

Decrements the value of the control by n steps multiplied by the step factor.

 
stepDown(n: number): void

Parameters

  • n: number

Returns void

stepUp

Section titled "stepUp"

Increments the value of the control by n steps multiplied by the step factor.

 
stepUp(n: number): void

Parameters

  • n: number

Returns void

Events

Section titled "Events"

onChange

Section titled "onChange"

Emitted when the value of the control changes.

 
onChange(args: CustomEvent<number>): void

Parameters

Returns void

onHover

Section titled "onHover"

Emitted when hover is enabled and the user mouses over a symbol of the rating.

 
onHover(args: CustomEvent<number>): void

Parameters

Returns void