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.
Element
igc-rating
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.

Example

<!-- Basic rating -->
<igc-rating value="3" max="5" label="Rate this product"></igc-rating>

Constructors

Section titled "Constructors"

IgcRatingComponent 

new IgcRatingComponent(): IgcRatingComponent

Defined in src/components/rating/rating.ts:286

Returns IgcRatingComponent

Properties

Section titled "Properties"

allowReset

Section titled "allowReset"

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

 
allowReset: boolean = false

Defined in src/components/rating/rating.ts:280

disabled

Section titled "disabled"

Inherited from: FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) )

The disabled state of the component.

 
disabled: boolean

Defined in src/components/common/mixins/forms/types.ts:29

hoverPreview

Section titled "hoverPreview"

Sets hover preview behavior for the component

 
hoverPreview: boolean = false

Defined in src/components/rating/rating.ts:246

invalid

Section titled "invalid"

Inherited from: FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) )

Sets the control into invalid state (visual state only).

 
invalid: boolean

Defined in src/components/common/mixins/forms/types.ts:36

Optional label

Section titled "label"

The label of the control.

 
label: string

Defined in src/components/rating/rating.ts:211

name

Section titled "name"

Inherited from: FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) )

The name attribute of the control.

 
name: string

Defined in src/components/common/mixins/forms/types.ts:42

readOnly

Section titled "readOnly"

Makes the control a readonly field.

 
readOnly: boolean = false

Defined in src/components/rating/rating.ts:253

Optional 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

Defined in src/components/rating/rating.ts:221

styles

Section titled "styles" 
styles: CSSResult[]

Defined in src/components/rating/rating.ts:110

tagName

Section titled "tagName"

The tagName read-only property of the Element interface returns the tag name of the element on which it's called.

MDN Reference

 
tagName: "igc-rating" = 'igc-rating'

Defined in src/components/rating/rating.ts:109

Accessors

Section titled "Accessors"

defaultValue

Section titled "defaultValue"

Inherited from: FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) ) 

get defaultValue(): unknown

Defined in src/components/common/mixins/forms/types.ts:163

Returns unknown

The initial value of the component.

 
set defaultValue(value: unknown): void

Defined in src/components/common/mixins/forms/types.ts:162

Parameters

  • value: unknown

Returns void

form

Section titled "form"

Inherited from: FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) )

Returns the HTMLFormElement associated with this element.

 
get form(): HTMLFormElement | null

Defined in src/components/common/mixins/forms/types.ts:45

Returns HTMLFormElement | null

max

Section titled "max" 
get max(): number

Defined in src/components/rating/rating.ts:186

Returns number

The maximum value for the rating.

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

 
set max(value: number): void

Defined in src/components/rating/rating.ts:176

Parameters

  • value: number

Returns void

single

Section titled "single" 
get single(): boolean

Defined in src/components/rating/rating.ts:270

Returns boolean

Toggles single selection visual mode.

 
set single(value: boolean): void

Defined in src/components/rating/rating.ts:261

Parameters

  • value: boolean

Returns void

step

Section titled "step" 
get step(): number

Defined in src/components/rating/rating.ts:202

Returns number

The minimum value change allowed.

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

 
set step(value: number): void

Defined in src/components/rating/rating.ts:198

Parameters

  • value: number

Returns void

validationMessage

Section titled "validationMessage"

Inherited from: FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) )

A string containing the validation message of this element.

 
get validationMessage(): string

Defined in src/components/common/mixins/forms/types.ts:54

Returns string

validity

Section titled "validity"

Inherited from: FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) )

Returns a ValidityState object which represents the different validity states the element can be in, with respect to constraint validation.

 
get validity(): ValidityState

Defined in src/components/common/mixins/forms/types.ts:51

Returns ValidityState

value

Section titled "value" 
get value(): number

Defined in src/components/rating/rating.ts:237

Returns number

The current value of the component

 
set value(number: number): void

Defined in src/components/rating/rating.ts:230

Parameters

  • number: number

Returns void

willValidate

Section titled "willValidate"

Inherited from: FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) )

A boolean value which returns true if the element is a submittable element that is a candidate for constraint validation.

 
get willValidate(): boolean

Defined in src/components/common/mixins/forms/types.ts:60

Returns boolean

Methods

Section titled "Methods"

addEventListener

Section titled "addEventListener"

Inherited from: FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) ) 

addEventListener(type: K, listener: object, options: boolean | AddEventListenerOptions): void

Defined in src/components/common/mixins/event-emitter.ts:7

Parameters

  • type: K
  • listener: object
  • options: boolean | AddEventListenerOptions

Returns void

checkValidity

Section titled "checkValidity"

Inherited from: FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) )

Checks for validity of the control and emits the invalid event if it invalid.

 
checkValidity(): boolean

Defined in src/components/common/mixins/forms/types.ts:146

Returns boolean

emitEvent

Section titled "emitEvent"

Inherited from: FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) ) 

emitEvent(type: K, eventInitDict: CustomEventInit<D>): boolean

Defined in src/components/common/mixins/event-emitter.ts:30

Parameters

  • type: K
  • eventInitDict: CustomEventInit<D>

Returns boolean

removeEventListener

Section titled "removeEventListener"

Inherited from: FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) ) 

removeEventListener(type: K, listener: object, options: boolean | EventListenerOptions): void

Defined in src/components/common/mixins/event-emitter.ts:17

Parameters

  • type: K
  • listener: object
  • options: boolean | EventListenerOptions

Returns void

reportValidity

Section titled "reportValidity"

Inherited from: FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) )

Checks for validity of the control and shows the browser message if it invalid.

 
reportValidity(): boolean

Defined in src/components/common/mixins/forms/types.ts:149

Returns boolean

setCustomValidity

Section titled "setCustomValidity"

Inherited from: FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) )

Sets a custom validation message for the control. As long as message is not empty, the control is considered invalid.

 
setCustomValidity(message: string): void

Defined in src/components/common/mixins/forms/types.ts:155

Parameters

  • message: string

Returns void

stepDown

Section titled "stepDown"

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

 
stepDown(n: number): void

Defined in src/components/rating/rating.ts:455

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

Defined in src/components/rating/rating.ts:447

Parameters

  • n: number

Returns void

register

Section titled "register" 
register(): void

Defined in src/components/rating/rating.ts:113

Returns void

Events

Section titled "Events"

igcChange

Section titled "igcChange" 
igcChange: CustomEvent<number>

Defined in src/components/rating/rating.ts:44

Example

<!-- Basic rating -->
<igc-rating value="3" max="5" label="Rate this product"></igc-rating>

igcHover

Section titled "igcHover" 
igcHover: CustomEvent<number>

Defined in src/components/rating/rating.ts:45

Example

<!-- Basic rating -->
<igc-rating value="3" max="5" label="Rate this product"></igc-rating>