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**