Rating

The Rating component displays a visual rating scale, allowing users to select or view a rating value. It supports both interactive and read-only modes.

Usage & Examples

Default

default.tsx


<Rating 
  value={3}
  onChange={(val) => console.log(val)} 
/>

Props API

Rating props API
				Default	Description
`aria-describedby`	`string`	No	aria	`—`	References the id of an element that describes the rating group.
`aria-label`	`string`	No	aria	`—`	Accessible label for the rating group. Prefer `label` when a visible label is needed.
`aria-labelledby`	`string`	No	aria	`—`	References the id of an element that labels the rating group.
`className`	`string`	No	styling	`—`	Optional additional CSS class names for custom styling.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`glass`	`boolean`	No	props	`configured default glass setting (fallback: false)`	Adds a translucent glass surface behind the rating stars.
`id`	`string`	No	props	`—`	Optional unique id for the rating group.
`interactive`	`boolean`	No	props	`true`	If true, the user can interact with the rating (hover, click, keyboard navigation).
`label`	`string`	No	props	`—`	Visible label for the rating component.
`max`	`number`	No	props	`5`	The maximum number of stars available for the rating.
`onChange`	`((rating: number) => void)`	No	events	`—`	Callback function invoked when the rating changes. Receives the new rating (1-indexed) as its argument.
`readOnly`	`boolean`	No	props	`false`	If true, the rating is read-only and cannot be changed.