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

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:283

disabled

Section titled "disabled"

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

The disabled state of the component.

 
disabled: boolean

Defined in src/internals/mixins/forms/types.ts:30

hoverPreview

Section titled "hoverPreview"

Whether to show a preview of the value when hovering over the symbols.

 
hoverPreview: boolean = false

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

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/internals/mixins/forms/types.ts:37

Optional label

Section titled "label"

The label of the control.

 
label: string

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

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 = 5

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

name

Section titled "name"

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

The name of the control, submitted with the form data.

 
name: string

Defined in src/internals/mixins/forms/types.ts:43

readOnly

Section titled "readOnly"

Makes the control a readonly field.

 
readOnly: boolean = false

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

single

Section titled "single"

Toggles single selection visual mode.

 
single: boolean = false

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

step

Section titled "step"

The minimum value change allowed.

Valid values are in the interval between 0.001 and 1 inclusive. The component clamps a value outside of the interval to the closest bound.

 
step: number = 1

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

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:219

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:112

Accessors

Section titled "Accessors"

defaultValue

Section titled "defaultValue"

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

get defaultValue(): any

Defined in src/internals/mixins/forms/types.ts:182

The initial value of the component.

 
set defaultValue(value: unknown): void

Defined in src/internals/mixins/forms/types.ts:182

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/internals/mixins/forms/types.ts:46

Returns HTMLFormElement | null

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/internals/mixins/forms/types.ts:55

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/internals/mixins/forms/types.ts:52

Returns ValidityState

value

Section titled "value" 
get value(): any

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

The value of the component

 
set value(number: number): void

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

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/internals/mixins/forms/types.ts:61

Returns boolean

Methods

Section titled "Methods"

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's invalid.

 
checkValidity(): boolean

Defined in src/internals/mixins/forms/types.ts:166

Returns boolean

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's invalid.

 
reportValidity(): boolean

Defined in src/internals/mixins/forms/types.ts:169

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/internals/mixins/forms/types.ts:175

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:477

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:469

Parameters

  • n: number

Returns void