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
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | - | The current rating value (number of filled stars). |
| onChange | (value: number) => void | - | Callback fired when the user selects a new rating. |
| max | number | 5 | Total number of rating icons to display. |
| size | "xs" | "small" | "medium" | "large" | "xl" | Configured Default | Controls the size of the rating icons. |
| interactive | boolean | true | If false, disables interaction and makes the rating read-only. |
| theme | "primary" | "secondary" | "tertiary" | "quaternary" | "clear" | Configured Default | Color theme for the filled rating icons. |
| state | "success" | "error" | "warning" | - | Visual state indicator for the rating (success, error, warning). |
| label | string | - | Label for screen readers describing the rating input. |
| className | string | - | Custom class name for the rating wrapper. |
| data-testid | string | "rating" | Test ID for querying the component in tests. |