The disabled state of the component
[disabled=false]
Sets hover preview behavior for the component
hover-preview
Control the validity of the control.
The label of the control.
The maximum value for the rating.
If there are projected symbols, the maximum value will be resolved based on the number of symbols.
The name attribute of the control.
Makes the control a readonly field.
readonly
Toggles single selection visual mode.
Determines the size of the component.
--ig-size
CSS custom property instead.The minimum value change allowed.
Valid values are in the interval between 0 and 1 inclusive.
The current value of the component
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.
value-format
Static
stylesStatic
Readonly
tagReturns the HTMLFormElement associated with this element.
Sets the readonly state of the component
readOnly
property instead.A string containing the validation message of this element.
Returns a ValidityState object which represents the different validity states the element can be in, with respect to constraint validation.
A boolean value which returns true if the element is a submittable element that is a candidate for constraint validation.
Static
register
Rating provides insight regarding others' opinions and experiences, and can allow the user to submit a rating of their own
Element
igc-rating
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.