Introduction

An interactive input control that allows users to view and submit star-based ratings (e.g. product reviews, feedback scores). It features built-in support for hover states, custom icons, fractional half-star precision, and full keyboard navigation.

The Rating Group component is fully integrated as a ratingGroup block in the Page Builder. This allows content authors and developers to easily configure visual stars, default selections, custom scales (counts), half-star precision toggles, and color themes directly within the CMS.

Usage

These examples illustrate how content editors configure and place the rating group component.

1. Standard Product Rating

A classic 5-star rating scale starting with 3 pre-selected stars. Used for standard user feedback, feedback lists, or product details.

{
  "type": "ratingGroup",
  "label": "Rate your purchase",
  "defaultValue": 3,
  "count": 5,
  "interactive": true
}

2. High-Precision Score Selector

Features half-star selection precision, a custom 10-star scale, size scale customization, and an energetic orange accent theme. Useful for detailed critic scoring or comprehensive reviews.

{
  "type": "ratingGroup",
  "label": "Product Score",
  "defaultValue": 7.5,
  "count": 10,
  "allowHalf": true,
  "colorPalette": "orange",
  "size": "sm",
  "interactive": true
}

3. Read-Only Average Rating Display

Designed strictly to visualize aggregated ratings. Hover interactions and click selections are disabled, rendering a clean, read-only display.

{
  "type": "ratingGroup",
  "label": "Community Rating (4.5 / 5)",
  "defaultValue": 4.5,
  "allowHalf": true,
  "readOnly": true,
  "colorPalette": "amber",
  "interactive": true
}

Props

Developer Notes & Accessibility

• Smart Switcher Hydration: Like this system's other form controls, the Rating Group keeps a zero-JS footprint on initial render. If rendered as read-only or with no values, it is delivered as static SSR. Providing hover handlers, active value changes, or setting "interactive": true promotes it to a client-side hydrated island.
• WAI-ARIA Accessibility: Complies with the WAI-ARIA rating widget pattern. It utilizes an accessible hidden input to support standard HTML form submissions, while managing aria-valuenow, aria-valuemin, and aria-valuemax states on the container.
• Keyboard Navigation: Fully supports keyboard focus and navigation. Standard keyboard controls work seamlessly:
  • ArrowRight / ArrowUp: Increments score by 1 step (or 0.5 step if allowHalf is true).
  • ArrowLeft / ArrowDown: Decrements score by 1 step (or 0.5 step if allowHalf is true).
  • Home: Sets value to 0.
  • End: Sets value to the maximum configured count.
• Roving Focus: Uses a roving tabIndex to ensure only the active or first rating item remains in the tab sequence, preventing tab trap issues.