Rating
A simple, accessible way to capture a numeric opinion.
pnpm dlx shadcn@latest add @uiarc/ratingLive · keyboard ready
- Collecting a 1 to N score in reviews or feedback forms.
- Displaying average scores, with readOnly and allowHalf.
- Forms that submit natively, via name.
- Use slider for continuous values.
- Use reactions for emoji feedback on content.
- Use radio-group when options are labelled choices rather than a scale.
Installation
Add Rating with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/ratingAdds the component and its local dependencies, and installs motion, lucide-react. First time? Add the @uiarc registry to components.json, or use the full URL:
example.tsx
import { Rating } from "@/components/arc/rating/rating"; export function ReviewForm() { const [stars, setStars] = useState(0); return ( <form> <Rating label="Overall experience" value={stars} onChange={setStars} name="rating" /> </form> );}Rating
A star rating built as a radio group, with half stars, scrubbing, clearing, and a rolling value label.
PropTypeDefaultDescription
labelRequiredstring–Visible label and accessible name of the group.valuenumber–Controlled value. 0 means not rated.defaultValuenumber0Initial value when uncontrolled.onChange(value: number) => void–Receives the committed value; 0 means cleared.maxnumber5Number of stars.readOnlybooleanfalseRenders a static image with an aria-label instead of radios.disabledbooleanfalseDisables interaction.descriptionstring–Hint under the stars, linked with aria-describedby.size"sm" | "md" | "lg""md"Star size.allowHalfbooleanfalsePointer, touch, and arrow keys move in half stars.allowClearbooleantrueChoosing the current value again clears it; Backspace and Delete clear from the keyboard.showValuebooleantrueShows the word or number for the previewed value beside the stars.valueLabelsreadonly string[]–One word per whole star. Five whole stars default to Poor through Excellent.emptyLabelstring"Not rated"Shown when the value is 0.namestring–Submits the value with a surrounding form via a hidden input.classNamestring–Class on the field wrapper.- ArrowRightorArrowUp
- Increases by one step (half a star with allowHalf).
- ArrowLeftorArrowDown
- Decreases by one step.
- HomeorEnd
- Jumps to the lowest or highest value.
- 1-9
- Sets that many stars.
- BackspaceorDelete
- Clears the rating when allowClear is on.
- Interactive ratings are role="radiogroup" with one role="radio" per step and a roving tab stop on the checked value.
- Each radio is labelled like "Great, 4 of 5 stars"; commits are announced in a polite live region.
- readOnly renders role="img" with an aria-label such as "Quality: 4 out of 5".
- The fill sweeps star by star with a small stagger in the direction the value moved; a commit pops the stars in a wave.
- Pressed stars dip to 0.86 scale and the value word rolls in the direction of change.
- Reduced motion sets fills instantly and drops the pop, press scale, and word roll.
- Stars sit in 36px cells for easy touch targets, and the value label wraps under the stars when space runs out.
- Touch presses scrub across stars with pointer capture; touch-action pan-y keeps vertical scrolling working.
- Fills and pops are short motion animations per star; fine for a form, but use readOnly for long lists of scores.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for collecting or showing a 1 to N score. Use slider for continuous values and reactions for emoji feedback.
- Pass name to submit with a native form. Use readOnly to display averages; combine with allowHalf for fractional values.
The full library index for assistants is at /llms.txt.
