Skip to content

🎉 v5 release candidate is out! Head to the v5 documentation to get started.

Edit this page

Rating

Ratings provide insight regarding others’ opinions and experiences with a product. Users can also rate products they’ve purchased.

Simple ratings

Controlled
Read only
Disabled
Pristine

Customized ratings

Here are some examples of customizing the component. You can learn more about this in the overrides documentation page.

Custom empty icon
Custom icon and color
10 stars
Custom icon set

Hover feedback

You can display a label on hover to help users pick the correct rating value. The demo uses the onChangeActive prop.

Poor+
<Rating
  name="hover-feedback"
  value={value}
  precision={0.5}
  onChange={(event, newValue) => {
    setValue(newValue);
  }}
  onChangeActive={(event, newHover) => {
    setHover(newHover);
  }}
/>
{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 />

Sizes

Fancy larger or smaller ratings? Use the size prop.

<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.

API