---
filename: /packages/material-ui-lab/src/Rating/Rating.js
---
# Rating API
The API documentation of the Rating React component. Learn more about the props and the CSS customization points.
## Import
```js
import Rating from '@material-ui/lab/Rating';
// or
import { Rating } from '@material-ui/lab';
```
You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
## Component name
The `MuiRating` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level.
## Props
| Name | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
| defaultValue | number | null | The default value. Use when the component is not controlled. |
| disabled | bool | false | If `true`, the rating will be disabled. |
| emptyIcon | node | | The icon to display when empty. |
| emptyLabelText | node | 'Empty' | The label read when the rating input is empty. |
| getLabelText | func | function defaultLabelText(value) { return `${value} Star${value !== 1 ? 's' : ''}`;} | Accepts a function which returns a string value that provides a user-friendly name for the current value of the rating.
For localization purposes, you can use the provided [translations](/guides/localization/).
**Signature:**
`function(value: number) => string`
*value:* The rating label's value to format. |
| icon | node | <Star fontSize="inherit" /> | The icon to display. |
| IconContainerComponent | elementType | function IconContainer(props) { const { value, ...other } = props; return <span {...other} />;} | The component containing the icon. |
| max | number | 5 | Maximum rating. |
| name | string | | The name attribute of the radio `input` elements. If `readOnly` is false, the prop is required, this input name`should be unique within the parent form. |
| onChange | func | | Callback fired when the value changes.
**Signature:**
`function(event: object, value: number) => void`
*event:* The event source of the callback.
*value:* The new value. |
| onChangeActive | func | | Callback function that is fired when the hover state changes.
**Signature:**
`function(event: object, value: number) => void`
*event:* The event source of the callback.
*value:* The new value. |
| precision | number | 1 | The minimum increment value change allowed. |
| readOnly | bool | false | Removes all hover effects and pointer events. |
| size | 'large'
| 'medium'
| 'small' | 'medium' | The size of the rating. |
| value | number | | The rating value. |
The `ref` is forwarded to the root element.
Any other props supplied will be provided to the root element (native element).
## CSS
| Rule name | Global class | Description |
|:-----|:-------------|:------------|
| root | .MuiRating-root | Styles applied to the root element.
| sizeSmall | .MuiRating-sizeSmall | Styles applied to the root element if `size="small"`.
| sizeLarge | .MuiRating-sizeLarge | Styles applied to the root element if `size="large"`.
| readOnly | .MuiRating-readOnly | Styles applied to the root element if `readOnly={true}`.
| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`.
| focusVisible | .Mui-focusVisible | Pseudo-class applied to the root element if keyboard focused.
| visuallyhidden | .MuiRating-visuallyhidden | Visually hide an element.
| pristine | .MuiRating-pristine | Styles applied to the pristine label.
| label | .MuiRating-label | Styles applied to the label elements.
| icon | .MuiRating-icon | Styles applied to the icon wrapping elements.
| iconEmpty | .MuiRating-iconEmpty | Styles applied to the icon wrapping elements when empty.
| iconFilled | .MuiRating-iconFilled | Styles applied to the icon wrapping elements when filled.
| iconHover | .MuiRating-iconHover | Styles applied to the icon wrapping elements when hover.
| iconFocus | .MuiRating-iconFocus | Styles applied to the icon wrapping elements when focus.
| iconActive | .MuiRating-iconActive | Styles applied to the icon wrapping elements when active.
| decimal | .MuiRating-decimal | Styles applied to the icon wrapping elements when decimals are necessary.
You can override the style of the component thanks to one of these customization points:
- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes).
- With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
- With a theme and an [`overrides` property](/customization/globals/#css).
If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-lab/src/Rating/Rating.js) for more detail.
## Demos
- [Rating](/components/rating/)