Rating
Star rating input for collecting user feedback. Supports interactive selection, read-only display, three sizes, disabled state, and configurable max stars.
import
{ Rating } from "@pepulux/ui"Interactive — controlled
Click a star to set the rating. Hover previews the selection.
Rate your experience
Rating: 3 / 5
Sizes — sm / md / lg
Controls the star icon dimension.
Small
Medium (default)
Large
Read-only
No hover/click. Use to display a score without allowing changes.
5.0 / 5
4.0 / 5
3.0 / 5
2.0 / 5
1.0 / 5
Custom max stars
Set max to change total star count (default is 5).
Out of 5 (default)
Out of 10
Multi-criteria form
Collect separate scores per dimension.
How was your experience?
Service quality
Product quality
Avg: 4 / 5
Disabled
Dims the stars and blocks hover/click.
Disabled interactive
Disabled read-only
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | 0 | Current selected star count |
| onChange | (value: number) => void | — | Called when a star is clicked (interactive mode) |
| max | number | 5 | Total number of stars rendered |
| size | "sm" | "md" | "lg" | "md" | Star icon size — sm 16px / md 24px / lg 32px |
| readOnly | boolean | false | Disables hover and click, preserves cursor-default |
| disabled | boolean | false | Dims the control and disables interaction |
| label | string | — | Label text displayed above the stars |
| className | string | — | Additional CSS classes on the wrapper |