Rating API
Import
import Rating from '@mui/material/Rating';
// or
import { Rating } from '@mui/material';Component name
The nameMuiRating can be used when providing default props or style overrides in the theme.Props
Props of the native component are also available.
| Name | Type | Default | Description |
|---|---|---|---|
| classes | object | Override or extend the styles applied to the component. See CSS API below for more details. | |
| defaultValue | number | null | The default value. Use when the component is not controlled. |
| disabled | bool | false | If true, the component is disabled. |
| emptyIcon | node | <StarBorder fontSize="inherit" /> | 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. This is important for screen reader users. For localization purposes, you can use the provided translations. Signature: function(value: number) => stringvalue: The rating label's value to format. |
| highlightSelectedOnly | bool | false | If true, only the selected icon will be highlighted. |
| 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. This input name should be unique within the page. Being unique within a form is insufficient since the name is used to generated IDs. | |
| onChange | func | Callback fired when the value changes. Signature: function(event: React.SyntheticEvent, value: number | null) => voidevent: 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: React.SyntheticEvent, value: number) => voidevent: 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 | 'small' | 'medium' | 'large' | string | 'medium' | The size of the component. |
| sx | Array<func | object | bool> | func | object | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details. | |
| value | number | The rating value. |
The
ref is forwarded to the root 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". |
| sizeMedium | .MuiRating-sizeMedium | Styles applied to the root element if size="medium". |
| 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 | State class applied to the root element if disabled={true}. |
| focusVisible | .Mui-focusVisible | State class applied to the root element if keyboard focused. |
| visuallyHidden | .MuiRating-visuallyHidden | Visually hide an element. |
| label | .MuiRating-label | Styles applied to the label elements. |
| labelEmptyValueActive | .MuiRating-labelEmptyValueActive | Styles applied to the label of the "no value" input when it is active. |
| 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 using one of these customization options:
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.