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
Default
<Rating
value={3}
onChange={(val) => console.log(val)}
/>Props
| Type | Description | |
|---|---|---|
| aria-describedby | string | References the id of an element that describes the rating group. |
| aria-label | string | Accessible label for the rating group. Prefer `label` when a visible label is needed. |
| aria-labelledby | string | References the id of an element that labels the rating group. |
| className | string | Optional additional CSS class names for custom styling. |
| data-testid | string | Optional test ID for testing frameworks. |
| id | string | Optional unique id for the rating group. |
| interactive | boolean | If true, the user can interact with the rating (hover, click, keyboard navigation). |
| label | string | Visible label for the rating component. |
| max | number | The maximum number of stars available for the rating. |
| onChange | ((rating: number) => void) | Callback function invoked when the rating changes. Receives the new rating (1-indexed) as its argument. |
| readOnly | boolean | If true, the rating is read-only and cannot be changed. |
| required | boolean | If true, marks the field as required. |
| size | SizeType | The size of the rating component. One of: "xs" | "small" | "medium" | "large" | "xl" |
| starAriaLabelPrefix | string | Optional aria-label prefix for each star. Example: "Rating star" -> "Rating star 1 of 5" |
| state | StateType | State of the rating. One of: "success" | "error" | "warning" | "disabled" | "" |
| theme | ThemeType | The theme to use for styling. One of: "primary" | "secondary" | "tertiary" | "quaternary" | "clear" |
| value | number | The current rating value. |