Form
Rating
Star rating implemented as a radio group of visually hidden inputs, with hover preview, read-only mode and optional clearing.
Import
import { Rating } from "@zephora/react";Examples
Basic
<Rating defaultValue={3} />Controlled with clear
`allowClear` lets clicking the selected star reset the rating to 0.
Your rating: 4
const [stars, setStars] = React.useState(4);
<Rating value={stars} onValueChange={setStars} allowClear />
<p>Your rating: {stars || "none"}</p>Read-only, custom max, sizes
<Rating value={7} max={10} readOnly />
<Rating defaultValue={2} size="sm" />
<Rating defaultValue={2} size="lg" />API
Rating props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Controlled rating value (0 = empty). |
defaultValue | number | 0 | Initial rating value in uncontrolled mode. |
onValueChange | (value: number) => void | — | Called whenever the rating changes. |
max | number | 5 | Number of stars. |
readOnly | boolean | false | Displays the rating without allowing changes. |
disabled | boolean | false | Disables all interaction. |
allowClear | boolean | false | Clicking the currently selected star clears the rating to 0. |
size | "sm" | "md" | "lg" | "md" | Star scale. |
name | string | — | Radio group name (auto-generated when omitted). |
unstyled | boolean | false | Headless mode — drops Zephora classes so your own CSS can style it. |
…rest | HTMLAttributes<HTMLDivElement> | — | Forwarded to the radiogroup wrapper element. |
Keyboard
| Key | Action |
|---|---|
Arrow keys | Move between stars (native radio group navigation). |
Space | Selects the focused star. |