Primitives
Rating
A score in stars, whole or in halves
Usage
import { Rating, Stack, Text } from "@gpuixui/primitives";
import { useState } from "react";
const [score, setScore] = useState(0);
<Stack direction="column" gap="xs">
<Rating label="Quality" value={score} onValueChange={setScore} />
<Text role="caption" tone="muted">
{score === 0 ? "Not rated" : `${score} of 5`}
</Text>
</Stack>;API
| Prop | Type | Default | Consequence |
|---|---|---|---|
value | number | — | controlled rating, 0..max |
defaultValue | number | 0 | uncontrolled start |
onValueChange | (value: number) => void | — | the new rating; 0 means cleared |
onChange | (value: number) => void | — | deprecated alias for onValueChange |
max | number | 5 | how many stars to paint; a stored null is the default five, while a count that is there and cannot be laid out is one star |
allowHalf | boolean | false | score in halves |
size | "sm" | "md" | "lg" | "md" | star size from iconSize |
disabled | boolean | false | out of the tab order, half opacity, inert |
readOnly | boolean | false | shows the value, takes no input, no tab stop |
label | string | none | the group's name |
description | string | none | announced help for the group (aria-description) |
invalid | boolean | false | chosen stars paint destructive |
className | string | — | a Tailwind class string, joined after the recipe so it wins conflicts |
style | StateStyle<RatingState> | — | resolved against the live state, merged last |
onClick / onKeyDown / onKeyUp / onFocus / onBlur | host handlers | none | composed with the rating's own |
ref / aria-id / onLayout | host props | none | land on the star that holds the tab stop, so they follow the score; measure a wrapper for the whole control |
testId | string | — | stable locator on the group |
Keyboard
- Arrow UpArrow DownArrow LeftArrow Right
- steps the score by a star, or by half a star in half mode
- HomeEnd
- the lowest or highest score
- DeleteBackspace
- clears the score
- EnterSpace
- commits the focused star's score
read from Rating.tsx
Edit this page on GitHubpackages/primitives/docs/rating.mdx