Rating
Stars for giving a score, or for showing an average. Interactive, it behaves like a radio group; read-only, it is one image with a text name and supports half stars.
Installation
Set up Camaleo once (Installation), then import it. The skin you load draws the stars.
import { Rating } from "@camaleo/react";Anatomy
Interactive, the root is a radio group with one radio per star. Read-only, the root is an image and each star is a plain shape.
Examples
Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above.
4.8 · 128 reviews
Read-only, with the number
readOnly turns the stars into one image named by getLabel. Print the average and the count next to it, so everyone can compare at a glance.
Trail running shoes
Merino base layer
Insulated bottle, 750 ml
Half values
Read-only, any fraction shows as a half star, so 4.5 and 3.5 look different. Interactive ratings take whole stars only.
Pick a star
With a caption
Pick a star. Words like "Good" or "Excellent" in the caption and in each star's name tell people what the score means.
Required in a review
Send without a star. Check the value on submit and show a FieldError; inside a Field the message is linked to the group.
Rate your last purchases
Trail running shoes
Merino base layer
Insulated bottle, 750 ml
Several on one screen
When a list has one rating per row, give each its own aria-label with the item's name, or a screen reader hears "Your rating" three times.
You can rate it once it is delivered, on Oct 31.
Disabled, with a reason
Say when rating opens. A row of grey stars with no explanation looks broken.
Sizes
Set --cml-star-size on the rating: small for lists and cards, large when the rating is the whole task.
In context
Ratings live in reviews, cards and follow-ups. These are whole pieces of UI you can copy, in the skin you picked.
Ridgeline trail shoe
4.8 · 128 reviews
How did Marina do?
Your chat about a late refund was closed today at 2:40 PM.
What helped?
Guidelines
4.8 · 128 reviews
"4.8 · 128 reviews" is precise, and tells people how much to trust it.
Nobody can tell 4.6 from 4.8, and a single review looks as solid as a hundred.
A short scale is quick to pick and easy to read back.
The difference between 6 and 7 means nothing, and the targets get small.
Props
0 means no star picked yet.Inside a Field, the label names the group and disabled and name can come from there too. The other radio-group attributes pass through.
Styling hooks
Restyle it without forking: target the attributes, or set the tokens on a parent, a skin or the rating itself.
Attributes
Tokens it reads
Color
Shape & size
This component only
/* gold stars, only on product cards */
.product-card [data-slot="rating"] {
--cml-star-color: var(--cml-warning);
}Accessibility
- Interactive, it is a radio group: one tab stop, and each star is a radio named by getLabel, like "4 of 5 stars".
- Read-only, it is a single role="img" with getLabel as its name, so screen readers hear "Rated 4.8 out of 5" once, not five shapes.
- Give the group a name: a FieldLabel inside a Field, or aria-label when it stands alone. An id goes to the first star, so an ErrorSummary link can focus it.
- Filled stars differ by shape and fill, not only color, and each target is at least 24 × 24 px.