Rating
InputsStar rating widget with half-star and keyboard support.
Interactive star rating with hover preview and optional fraction support for half-star or quarter-star values. Can be set to readOnly for display-only use cases.
Usage
import { Rating } from "nosible-ux"
export default function Example() {
return <Rating defaultValue={3} aria-label="Signal confidence" />
}Examples
Half-star precision
Read-only display
Sizes
Accessibility
Arrow keys increment/decrement by 1/fractions. Home sets to 0, End sets to max. Partial fill is done via CSS clipPath — screen reader reads aria-valuenow.
Props
| Name | Type | Default | Description |
|---|---|---|---|
aria-label | string | undefined | "Rating" | Accessible label for the rating widget. |
defaultValue | number | undefined | 0 | Uncontrolled initial value. |
fractions | number | undefined | 1 | Number of selectable fractions per star. 1 = whole stars, 2 = half stars. Higher values allow finer-grained selection. |
max | number | undefined | 5 | Total number of stars. |
onChange | ((value: number) => void) | undefined | — | Fired when the user selects a value. Not called in readOnly mode. |
readOnly | boolean | undefined | false | When true, no interaction is possible. Renders a static display. |
size | "sm" | "md" | "lg" | undefined | "md" | Star size preset. |
value | number | undefined | — | Controlled rating value (0 – max). |