Class IgcRatingComponent

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.

Example

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

Example

<!-- Half-star rating with hover preview -->
<igc-rating step="0.5" hover-preview value-format="{0} out of {1} stars"></igc-rating>

Example

<!-- Custom symbols via projected rating symbols -->
<igc-rating>
  <igc-rating-symbol>
    <igc-icon name="heart_filled" collection="default"></igc-icon>
    <igc-icon name="heart_outlined" collection="default" slot="empty"></igc-icon>
  </igc-rating-symbol>
  <igc-rating-symbol>
    <igc-icon name="heart_filled" collection="default"></igc-icon>
    <igc-icon name="heart_outlined" collection="default" slot="empty"></igc-icon>
  </igc-rating-symbol>
</igc-rating>

Element

igc-rating

Slot

symbol - Slot for projecting custom igc-rating-symbol elements. When used, the number of symbols determines the max value.

Slot

value-label - Slot for custom content displayed alongside the rating value.

Fires

igcChange - Emitted when the value of the control changes.

Fires

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

Csspart

base - The main wrapper which holds all of the rating elements.

Csspart

label - The label part.

Csspart

value-label - The value label part.

Csspart

symbols - A wrapper for all rating symbols.

Csspart

symbol - The part of the encapsulated default symbol.

Csspart

full - The part of the encapsulated full symbols.

Csspart

empty - The part of the encapsulated empty symbols.

Cssproperty

--symbol-size - The size of the symbols.

Cssproperty

--symbol-full-color - The color of the filled symbol.

Cssproperty

--symbol-empty-color - The color of the empty symbol.

Cssproperty

--symbol-full-filter - The filter(s) used for the filled symbol.

Cssproperty

--symbol-empty-filter - The filter(s) used for the empty symbol.

Hierarchy

FormAssociatedElementInterface<this> & EventEmitterInterface<
IgcRatingComponentEventMap,
this,
> & LitElement<this>
- IgcRatingComponent

Constructors

constructor

new IgcRatingComponent(): IgcRatingComponent
Overrides FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) ).constructor
- Defined in src/components/rating/rating.ts:286
Returns IgcRatingComponent

Properties

allowReset

allowReset: boolean = false

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

Attr

allow-reset

Default

false

disabled

disabled: boolean

The disabled state of the component.

Attr

Default

false

hoverPreview

hoverPreview: boolean = false

Sets hover preview behavior for the component

Attr

hover-preview

invalid

invalid: boolean

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

Attr

Default

false

`Optional`label

label?: string

The label of the control.

Attr

label

name

name: string

The name attribute of the control.

Attr

readOnly

readOnly: boolean = false

Makes the control a readonly field.

Attr

readonly

`Optional`valueFormat

valueFormat?: string

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.

Attr

value-format

`Static`styles

styles: CSSResult[] = ...

`Static` `Readonly`tagName

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

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

MDN Reference

Accessors

defaultValue

get defaultValue(): unknown
Inherited from FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) ).defaultValue
- Defined in src/components/common/mixins/forms/types.ts:157
Returns unknown
set defaultValue(value: unknown): void
Inherited from FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) ).defaultValue
- Defined in src/components/common/mixins/forms/types.ts:156
The initial value of the component.

Parameters
- value: unknown
Returns void

form

get form(): HTMLFormElement | null
Inherited from FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) ).form
- Defined in src/components/common/mixins/forms/types.ts:45
Returns the HTMLFormElement associated with this element.

Returns HTMLFormElement | null

max

get max(): number
- Defined in src/components/rating/rating.ts:186
Returns number
set max(value: number): void
- Defined in src/components/rating/rating.ts:176
The maximum value for the rating.

If there are projected symbols, the maximum value will be resolved based on the number of symbols.
Attr
max
Default
```
5
```
Parameters
- value: number
Returns void

single

get single(): boolean
- Defined in src/components/rating/rating.ts:270
Returns boolean
set single(value: boolean): void
- Defined in src/components/rating/rating.ts:261
Toggles single selection visual mode.
Attr
single
Default
```
false
```
Parameters
- value: boolean
Returns void

step

get step(): number
- Defined in src/components/rating/rating.ts:202
Returns number
set step(value: number): void
- Defined in src/components/rating/rating.ts:198
The minimum value change allowed.

Valid values are in the interval between 0 and 1 inclusive.
Attr
step
Default
```
1
```
Parameters
- value: number
Returns void

validationMessage

get validationMessage(): string
Inherited from FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) ).validationMessage
- Defined in src/components/common/mixins/forms/types.ts:54
A string containing the validation message of this element.

Returns string

validity

get validity(): ValidityState
Inherited from FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) ).validity
- Defined in src/components/common/mixins/forms/types.ts:51
Returns a ValidityState object which represents the different validity states the element can be in, with respect to constraint validation.

Returns ValidityState

value

get value(): number
- Defined in src/components/rating/rating.ts:237
Returns number
set value(number: number): void
- Defined in src/components/rating/rating.ts:230
The current value of the component
Attr
value
Default
```
0
```
Parameters
- number: number
Returns void

willValidate

get willValidate(): boolean
Inherited from FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) ).willValidate
- Defined in src/components/common/mixins/forms/types.ts:60
A boolean value which returns true if the element is a submittable element that is a candidate for constraint validation.

Returns boolean

Methods

addEventListener

addEventListener<
    K extends string
    | number
    | symbol,
    M extends IgcRatingComponentEventMap & HTMLElementEventMap,
>(
    type: K,
    listener: (this: HTMLElement, ev: M[K]) => any,
    options?: boolean | AddEventListenerOptions,
): void
Inherited from FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) ).addEventListener
- Defined in src/components/common/mixins/event-emitter.ts:7
Type parameters
Type Parameters
- K extends string | number | symbol
- M extends IgcRatingComponentEventMap & HTMLElementEventMap
Parameters
- type: K
- listener: (this: HTMLElement, ev: M[K]) => any
- options: boolean | AddEventListenerOptions
Returns void
addEventListener(
    type: string,
    listener: EventListenerOrEventListenerObject,
    options?: boolean | AddEventListenerOptions,
): void
Inherited from FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) ).addEventListener
- Defined in src/components/common/mixins/event-emitter.ts:12
Parameters
- type: string
- listener: EventListenerOrEventListenerObject
- options: boolean | AddEventListenerOptions
Returns void
addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
): void
Inherited from FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) ).addEventListener
- Defined in node_modules/typescript/lib/lib.dom.d.ts:17886
Type parameters
Type Parameters
- K extends keyof HTMLElementEventMap
Parameters
- type: K
- listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any
- options: boolean | AddEventListenerOptions
Returns void

checkValidity

checkValidity(): boolean
Inherited from FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) ).checkValidity
- Defined in src/components/common/mixins/forms/types.ts:140
Checks for validity of the control and emits the invalid event if it invalid.

Returns boolean

emitEvent

emitEvent<K extends keyof IgcRatingComponentEventMap, D extends number>(
type: K,
eventInitDict?: CustomEventInit<D>,
): boolean
Inherited from FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) ).emitEvent
- Defined in src/components/common/mixins/event-emitter.ts:30
Type parameters
Type Parameters
- K extends keyof IgcRatingComponentEventMap
- D extends number
Parameters
- type: K
- eventInitDict: CustomEventInit<D>
Returns boolean

removeEventListener

removeEventListener<
    K extends string
    | number
    | symbol,
    M extends IgcRatingComponentEventMap & HTMLElementEventMap,
>(
    type: K,
    listener: (this: HTMLElement, ev: M[K]) => any,
    options?: boolean | EventListenerOptions,
): void
Inherited from FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) ).removeEventListener
- Defined in src/components/common/mixins/event-emitter.ts:17
Type parameters
Type Parameters
- K extends string | number | symbol
- M extends IgcRatingComponentEventMap & HTMLElementEventMap
Parameters
- type: K
- listener: (this: HTMLElement, ev: M[K]) => any
- options: boolean | EventListenerOptions
Returns void
removeEventListener(
    type: string,
    listener: EventListenerOrEventListenerObject,
    options?: boolean | EventListenerOptions,
): void
Inherited from FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) ).removeEventListener
- Defined in src/components/common/mixins/event-emitter.ts:25
Parameters
- type: string
- listener: EventListenerOrEventListenerObject
- options: boolean | EventListenerOptions
Returns void
removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
): void
Inherited from FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) ).removeEventListener
- Defined in node_modules/typescript/lib/lib.dom.d.ts:17888
Type parameters
Type Parameters
- K extends keyof HTMLElementEventMap
Parameters
- type: K
- listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any
- options: boolean | EventListenerOptions
Returns void

reportValidity

reportValidity(): boolean
Inherited from FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) ).reportValidity
- Defined in src/components/common/mixins/forms/types.ts:143
Checks for validity of the control and shows the browser message if it invalid.

Returns boolean

setCustomValidity

setCustomValidity(message: string): void
Inherited from FormAssociatedMixin( EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>( LitElement ) ).setCustomValidity
- Defined in src/components/common/mixins/forms/types.ts:149
Sets a custom validation message for the control. As long as message is not empty, the control is considered invalid.

Parameters
- message: string
Returns void

stepDown

stepDown(n?: number): void
- Defined in src/components/rating/rating.ts:455
Decrements the value of the control by n steps multiplied by the step factor.

Parameters
- n: number = 1
Returns void

stepUp

stepUp(n?: number): void
- Defined in src/components/rating/rating.ts:447
Increments the value of the control by n steps multiplied by the step factor.

Parameters
- n: number = 1
Returns void

Class IgcRatingComponent

Example

Example

Example

Element

Slot

Slot

Fires

Fires

Csspart

Csspart

Csspart

Csspart

Csspart

Csspart

Csspart

Cssproperty

Cssproperty

Cssproperty

Cssproperty

Cssproperty

Hierarchy

Hierarchy

Constructors

Properties

Accessors

Methods

Constructors

constructor

Returns IgcRatingComponent

Properties

allowReset

Attr

Default

disabled

Attr

Default

hoverPreview

Attr

invalid

Attr

Default

Optionallabel

Attr

name

Attr

readOnly

Attr

OptionalvalueFormat

Attr

Staticstyles

Static ReadonlytagName

Accessors

defaultValue

Returns unknown

Parameters

value: unknown

Returns void

form

Returns HTMLFormElement | null

max

Returns number

Attr

Default

Parameters

value: number

Returns void

single

Returns boolean

Attr

Default

Parameters

value: boolean

Returns void

step

Returns number

Attr

Default

Parameters

value: number

`Optional`label

`Optional`valueFormat

`Static`styles

`Static` `Readonly`tagName