Skip to main content

Ratings

Please refer to MUI's official docs for more details on component's usage guide and API documentation.

Basic Ratings

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



Customized Ratings

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



Half Ratings

Use precision prop to define the minimum increment value change allowed.

Half Ratings

Read only



Sizes

Use size={'small' | 'large'} prop for different sizes of ratings.



Hover Feedback

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

Poor+