Rating | Calcite Design System

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

Overview

With Rating the user can rate content with a one (1) to five (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.

Sample

Usage

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

Accessibility

Form controls such as Rating should specify their labelText property or be accompanied by a Label component to provide context to assistive technologies. For additional information, refer to the forms and labels accessibility guidance.

Key	Function
`Arrow left`	Moves 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 right`	Moves 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 down`	Moves focus and selection to the next item.
`Arrow up`	Moves focus and selection to the previous item.
`Enter`	Selects or unselects the focused item.
`Tab`	Moves focus in and out of the component.
`Tab` and `Shift`	Moves focus in and out of the component.

API reference

Properties

Property	Attribute	Description	Type	Default
average	average	Specifies a cumulative average from previous ratings to display.	`number`
count	count	Specifies the number of previous ratings to display.	`number`
disabled	disabled	When `true`, interaction is prevented and the component is displayed with lower opacity.	`boolean`	`false`
form	form	Specifies the `id` of the component's associated form. When not set, the component is associated with its ancestor form element, if one exists.	`string`
labelText	label-text	Specifies the component's label text.	`string`
messageOverrides		Overrides individual strings used by the component.	`Record<string, unknown> \| undefined`
name	name	Specifies the name of the component. Required to pass the component's `value` on form submission.	`string`
readOnly	read-only	When `true`, the component's value can be read, but cannot be modified.	`boolean`	`false`
scale	scale	Specifies the size of the component.	`Scale`	`"m"`
showChip	show-chip	When `true`, and if available, displays the `average` and/or `count` data summary in a `calcite-chip`.	`boolean`	`false`
status	status	Specifies the status of the input field, which determines message and icons.	`Status`	`"idle"`
validationIcon	validation-icon	Specifies the validation icon to display under the component.	`IconName \| boolean`
validationMessage	validation-message	Specifies the validation message to display under the component.	`string`
validityread-only		The component's current validation state.	`ValidityState`
value	value	The component's value.	`number`

Styles

Name	Description
--calcite-rating-spacing	Specifies the amount of left and right margin spacing between each item.
--calcite-rating-color-hover	Specifies the component's item color when hovered.
--calcite-rating-color-press	Specifies the component's item color when active.
--calcite-rating-color	Specifies the component's item color.
--calcite-rating-average-color	When `average` is set, specifies the component's item color.
--calcite-rating-average-text-color	When `average` is set, specifies the component's `average` text color.
--calcite-rating-count-text-color	Specifies the component's text color for `count`.

Events

Name	Description	Behavior
calciteRatingChange	Fires when the component's value changes.	bubblescomposed

Methods

Name	Description	Signature
componentOnReady	Creates a promise that resolves once the component is fully loaded.	`componentOnReady(): Promise<this>`
setFocus	Sets focus on the component.	`setFocus(options?: FocusOptions): Promise<void>`