Rating

Rating is a useful component to judge content, or display content quality.

Overview

With Rating the user can rate content with a 1 to 5 star scale. A readOnly property can be applied for instances where the user is unable to add a score, but can view an aggregate of past ratings.

Usage

  • Display the overall user-rated quality of content
  • Vote on the quality of content

Sample

3 samples
1
<calcite-rating></calcite-rating>
v3.0.3

Accessibility

Rating should be accompanied by a Label, which provides context of the intent to support assistive technologies.

Keyboard navigation

KeyFunction
Arrow leftMoves focus and selection to the previous item. If the current focus and selection is on the first item, focus and selection will cycle to the last item.
Arrow rightMoves focus and selection to the next item. If the current focus and selection is on the last item, focus and selection will cycle to the first item.
Arrow downMoves focus and selection to the next item.
Arrow upMoves focus and selection to the previous item.
EnterSelects or unselects the focused item.
TabMoves focus in and out of the component.
Tab and ShiftMoves focus in and out of the component.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
averageaverageSpecifies a cumulative average from previous ratings to display.number
countcountSpecifies the number of previous ratings to display.number
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
formformThe id of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any.string
messageOverridesUse this property to override individual strings used by the component.{ rating?: string; stars?: string; }
namenameSpecifies the name of the component. Required to pass the component's value on form submission.string
readOnlyread-onlyWhen true, the component's value can be read, but cannot be modified.booleanfalse
scalescaleSpecifies the size of the component."l" | "m" | "s""m"
showChipshow-chipWhen true, and if available, displays the average and/or count data summary in a calcite-chip.booleanfalse
statusstatusSpecifies the status of the input field, which determines message and icons."idle" | "invalid" | "valid""idle"
validationIconvalidation-iconSpecifies the validation icon to display under the component.boolean | string
validationMessagevalidation-messageSpecifies the validation message to display under the component.string
validityread-onlyThe current validation state of the component.{ valid: boolean; badInput: boolean; customError: boolean; patternMismatch: boolean; rangeOverflow: boolean; rangeUnderflow: boolean; stepMismatch: boolean; tooLong: boolean; tooShort: boolean; typeMismatch: boolean; valueMissing: boolean; }
valuevalueThe component's value.number

Styles

NameDescription
--calcite-rating-spacing-unit
deprecated Use --calcite-rating-spacing. Specifies the amount of left and right margin spacing between each item.
--calcite-rating-spacingSpecifies the amount of left and right margin spacing between each item.
--calcite-rating-color-hoverSpecifies the component's item color when hovered or selected.
--calcite-rating-colorSpecifies the component's item color.
--calcite-rating-average-colorSpecifies the component's item color when average is set.
--calcite-rating-average-text-colorSpecifies the component's average text color.
--calcite-rating-count-text-colorSpecifies the component's count text color.

Events

NameDescriptionBehavior
calciteRatingChangeFires when the component's value changes.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
setFocusSets focus on the component.setFocus(): Promise<void>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close