Ratings provide insight regarding others’ opinions and experiences with a product. Users can also rate products they’ve purchased.
Here are some examples of customizing the component. You can learn more about this in the overrides documentation page.
You can display a label on hover to help users pick the correct rating value.
The first demo uses the
onChangeActive prop while the last one uses the
The rating can display any float number with the
precision prop to define the minimum increment value change allowed.
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
nameprop 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
getLabelTextprop when the page language is not English.