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

1. Filled star
2. Half-filled Star
3. 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.

Keep size and color as set by default.

Don't change the color of the stars.

Don't scale up stars.

Don't scale down stars.

Variants

Variants for each half-value are available, starting from 0 to 5. No other variant exists or is allowed.

Star ratings should always have 5 available stars

Don't customize the number of stars available.

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