Rating

Calcite Rating is a simple tool to judge content, or simply display content quality.

Overview

With Rating, the user can rate consumable content with a 1-5 star scale. Ratings can be displayed alongside a chip which can contain an overall average from other users. A read-only prop can be applied for instances where the user can't interact, but simply to view an aggregate of past ratings.

Usage

  • Show overall user-rated quality of consumable content
  • Vote on quality of consumable content

Sample

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction
Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

Accessibility

Keyboard navigation

KeyFunction
Arrow leftMove focus and selection to previous item. If the current focus and selection is the first item, the focus and selection will cycle last item
Arrow rightMove focus and selection to next item. If the current focus and selection is the last item, the focus and selection will cycle to the first item
Arrow downMoves focus and selection to first item
Arrow upMoves focus and selection to last item
TabMove focus in and out of component
Tab and ShiftMove focus in and out of component

API reference

calcite-rating
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
averageaverage

optionally pass a cumulative average rating to display

optional
numberA number
undefined
countcount

optionally pass a number of previous ratings to display

optional
numberA number
undefined
disableddisabled

is the rating component in a selectable mode

booleanA boolean property should be present, or not
truefalse
intlRatingintl-rating

Localized string for "Rating" (used for aria label)

optional
stringA custom string
"Rating" (default)
intlStarsintl-stars

Localized string for labelling each star, `${num}` in the string will be replaced by the number

optional
stringA custom string
"Stars: ${num}" (default)
namename

The name of the rating

stringA custom string
undefined
readOnlyread-only

is the rating component in a selectable mode

booleanA boolean property should be present, or not
truefalse
scalescale

specify the scale of the component, defaults to m

typedChoose from a set of typed values
lm (default)s
showChipshow-chip

Show average and count data summary chip (if available)

booleanA boolean property should be present, or not
truefalse
valuevalue

the value of the rating component

numberA number
0 (default)

Events

NameDescriptionDetail
calciteRatingChange

Fires when the rating value has changed.

bubblescomposedcancelable
{ value: number; }

Methods

NameDescriptionSignatureReturns
setFocus

Sets focus on the component.

setFocus() => Promise<void>Promise<void>

Styles

NameDescriptionCSS Variable
--calcite-rating-spacing-unit

the amount of left/right margin between each rating star

--calcite-rating-spacing-unit

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