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.
Usage
- Display the overall user-rated quality of content
- Vote on the quality of content
Sample
<calcite-rating></calcite-rating>
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 | The 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 | |
messageOverrides | Use this property to override individual strings used by the component. | {
rating?: string;
stars?: string;
} | ||
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. | "l" | "m" | "s" | "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. | "idle" | "invalid" | "valid" | "idle" |
validationIcon | validation-icon | Specifies the validation icon to display under the component. | boolean | string | |
validationMessage | validation-message | Specifies the validation message to display under the component. | string | |
validity | The 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;
} | ||
value | value | The component's value. | number |
Styles
Name | Description |
---|---|
--calcite-rating-spacing-unit | --calcite-rating-spacing . Specifies the amount of left and right margin spacing between each item. |
--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 or selected. |
--calcite-rating-color | Specifies the component's item color. |
--calcite-rating-average-color | Specifies the component's item color when average is set. |
--calcite-rating-average-text-color | Specifies the component's average text color. |
--calcite-rating-count-text-color | Specifies the component's count text color. |
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<void> |
setFocus | Sets focus on the component. | setFocus(): Promise<void> |