Rating Component
React star rating component with keyboard-accessible radio semantics, hover preview, clearable selection and fractional read-only display (e.g. 4.3).
Import
1import { Rating } from "@neuctra/ui";Basic Usage
Interactive mode is a radiogroup of stars with hover preview.
Read-Only with Fractions
Read-only mode supports fractional values via a clipped overlay.
Sizes & Custom Max
Props
All available props for the Rating component.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | number | 0 | Controlled / uncontrolled rating |
| onChange | (value: number) => void | — | Fired with the selected star (or 0 on clear) |
| max | number | 5 | Number of stars |
| size | "sm" | "md" | "lg" | "md" | Star size |
| readOnly | boolean | false | Display mode; supports fractional values |
| allowClear | boolean | true | Clicking the current value resets to 0 |
| disabled | boolean | false | Dim and lock the control |
| label | string | "Rating" | Accessible group label |
| showValue | boolean | false | Numeric value next to the stars |
| colorClassName | string | "text-warning" | Color class applied to filled stars |
| starClassName | string | — | Styles every star icon, in addition to size/color/state classes. |
| emptyStarClassName | string | — | Styles the unfilled star color/class. |
| starWrapperClassName | string | — | Styles the clickable wrapper around each star in interactive mode. |
| valueClassName | string | — | Styles the numeric value shown when showValue is set. |
Accessibility
- Interactive stars are real radio inputs (sr-only) inside a radiogroup — keyboard and screen-reader selection work natively.
- Read-only mode renders role="img" with a text alternative like "Rating: 4.3 out of 5".
- A focus ring is shown on the focused star via peer-focus-visible.
Frequently Asked Questions
How do I install and import the Rating component?
Install the @neuctra/ui package, then import it with: import { Rating } from "@neuctra/ui";
What variants and sizes does Rating support?
Rating supports sizes: sm, md, lg. Use the variant and size props to switch between them, or pass a className to layer on custom Tailwind CSS classes.
Is the Rating component accessible?
Rating is built with semantic HTML and standard ARIA attributes, and supports keyboard navigation and focus states out of the box, so it works well with screen readers and keyboard-only users.