MUI Ratings - Example & Tutorial
Please refer to MUI's official docs for more details on component's usage guide and API documentation.
Use name prop to name the rating and use value or defaultValue prop to set any initial value to a rating.
Controlled
Read only
Disabled
No rating given
Use icon or emptyIcon prop to change default icon or empty icon respectively,
max prop to set number of ratings and IconContainerComponent prop to change every icons in the ratings.
Custom empty icon
Custom icon and color
10 stars
Custom icon set
Use precision prop to define the minimum increment value change allowed.
Half Ratings
Read only
Use size={'small' | 'large'} prop for different sizes of ratings.
You can display a label on hover to help users pick the correct rating value. The demo uses the onChangeActive prop.
Poor+