Rating
Clickable star rating with read-only mode and configurable max.
Live Demo
Rating: 3 / 5
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Controlled rating value |
defaultValue | number | 0 | Default value (uncontrolled) |
max | number | 5 | Maximum number of stars |
size | 'sm' | 'md' | 'lg' | 'md' | Size: sm | md | lg |
readOnly | boolean | false | Disables interaction |
disabled | boolean | false | Dims and disables the rating |
onChange | (value: number) => void | — | Callback with new rating value |
Usage
import { Rating } from '@ghiberti85/ui'
const [value, setValue] = useState(3)
// Interactive
<Rating value={value} onChange={setValue} />
// Read-only
<Rating value={4} readOnly />
// Sizes
<Rating value={3} size="sm" readOnly />
<Rating value={3} size="md" readOnly />
<Rating value={3} size="lg" readOnly />
// Custom max
<Rating value={7} max={10} readOnly />