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 read 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
Rating should be accompanied by a Label, which provides context of the intent to support assistive technologies.
Keyboard navigation
| 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 | |
| validity | The component's current validation state. | MutableValidityState | ||
| 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. |
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<this> |
| setFocus | Sets focus on the component. | setFocus(options?: FocusOptions): Promise<void> |