Rating โ
Ratings are a valuable way to showcase and/or collect customer feedback while building trust with Zurich's services and brand. This component allows users to allocate a rating from 1 to 5 stars, with half-values (0.5) increments.
Usage guidelines โ
When to use โ
The rating component can be used for two main functions:
- As a non-interactive element: to display the rating of an item or content.
- As an interactive element: to ask users to input their own feedback.
When not to use โ
Don't use the rating component as an input for data that has a continuous range; use Slider instead.
Accessibility guidelines โ
Hidden labels โ
Ratings are commonly identified contextually so labels aren't displayed. However, you should always provide one for assistive devices using the label attribute.
Keyboard interactions โ
- Tab: to focus on the rating component (and move focus onto the next interactive element when pressed again).
- Right/Up arrows: to increase the rating of 0.5 star, up to 5.
- Left/Down arrows: to decrease the rating of 0.5 star, down to empty.
Specifications โ
Anatomy โ
- Filled star
- Half-filled Star
- Empty star
Sizes and styling โ
Color and sizing have been defined and should not be altered to maintain a consistent standard of trust in Zurich's rating scale.
Variants โ
Variants for each half-value are available, starting from 0 to 5. No other variant exists or is allowed.
Behavior โ
Positioning โ
Make it clear which item the rating pertains to by making sure the layout and grouping are clear when several items are on the page.
Interaction โ
When Rating is used as an interactive component:
**Empty rating**
**Input value**
- Hover to visualize the number of stars
- Press to input the value
**Filled rating**