Rating
Ratings provide insight regarding others’ opinions and experiences with a product. Users can also rate products they’ve purchased.
Customized ratings
Here are some examples of customizing the component. You can learn more about this in the overrides documentation page.
Hover feedback
You can display a label on hover to help users pick the correct rating value.
The demo uses the onChangeActive
prop.
<Rating
name="hover-feedback"
value={value}
precision={0.5}
onChange={(event, newValue) => {
setValue(newValue);
}}
onChangeActive={(event, newHover) => {
setHover(newHover);
}}
emptyIcon={<StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />}
/>
{value !== null && (
<Box ml={2}>{labels[hover !== -1 ? hover : value]}</Box>
)}
Half ratings
The rating can display any float number with the value
prop.
Use the precision
prop to define the minimum increment value change allowed.
<Rating name="half-rating" defaultValue={2.5} precision={0.5} />
<Rating
name="half-rating-read"
defaultValue={2.5}
precision={0.5}
readOnly
/>
<Rating name="size-small" defaultValue={2} size="small" />
<Rating name="size-medium" defaultValue={2} />
<Rating name="size-large" defaultValue={2} size="large" />
Accessibility
(WAI tutorial: https://www.w3.org/WAI/tutorials/forms/custom-controls/#a-star-rating)
The accessibility of this component relies on:
- A radio group is used with its fields visually hidden.
It contains six radio buttons, one for each star and another for 0 stars, which is checked by default. Make sure you are providing a
name
prop that is unique to the parent form. - The labels for the radio buttons contain actual text (“1 Star”, “2 Stars”, …), make sure you provide a
getLabelText
prop when the page language is not English.
By default, the rating component uses both a difference of color and shape between the filled and empty icons to indicate the value.
In the event that you are using color as the only means to indicate the value, the information should also be also displayed as text, as in this demo. This is important to match success Criterion 1.4.1 of WCAG2.1.
<Rating
name="text-feedback"
value={value}
readOnly
precision={0.5}
emptyIcon={<StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />}
/>
<Box ml={2}>{labels[value]}</Box>