Skip to content
Edit this page

Rating API

API reference docs for the React Rating component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Import

import Rating from '@mui/material/Rating';
// or
import { Rating } from '@mui/material';
Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

classes

Override or extend the styles applied to the component.

See CSS API below for more details.

Type:

object
defaultValue

The default value. Use when the component is not controlled.

Type:

number

Default:

null
disabled

If true, the component is disabled.

Type:

bool

Default:

false
emptyIcon

The icon to display when empty.

Type:

node

Default:

<StarBorder fontSize="inherit" />
emptyLabelText

The label read when the rating input is empty.

Type:

node

Default:

'Empty'
getLabelText

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.

Type:

func

Default:

function defaultLabelText(value) { return `${value} Star${value !== 1 ? 's' : ''}`; }

Signature:

function(value: number) => string
  • value The rating label's value to format.
highlightSelectedOnly

If true, only the selected icon will be highlighted.

Type:

bool

Default:

false
icon

The icon to display.

Type:

node

Default:

<Star fontSize="inherit" />
IconContainerComponent

The component containing the icon.

Type:

elementType

Default:

function IconContainer(props) { const { value, ...other } = props; return <span {...other} />; }
max

Maximum rating.

Type:

number

Default:

5
name

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.

Type:

string
onChange

Callback fired when the value changes.

Type:

func

Signature:

function(event: React.SyntheticEvent, value: number | null) => void
  • event The event source of the callback.
  • value The new value.
onChangeActive

Callback function that is fired when the hover state changes.

Type:

func

Signature:

function(event: React.SyntheticEvent, value: number) => void
  • event The event source of the callback.
  • value The new value.
precision

The minimum increment value change allowed.

Type:

number

Default:

1
readOnly

Removes all hover effects and pointer events.

Type:

bool

Default:

false
size

The size of the component.

Type:

'small' | 'medium' | 'large' | string

Default:

'medium'
sx

The system prop that allows defining system overrides as well as additional CSS styles.

See the `sx` page for more details.

Type:

Array<func | object | bool> | func | object
value

The rating value.

Type:

number
The ref is forwarded to the root element.

Theme default props

You can use MuiRating to change the default props of this component with the theme.

CSS

The following class names are useful for styling with CSS (the state classes are marked).
To learn more, visit the component customization page.


.MuiRating-rootroot

Styles applied to the root element.

.MuiRating-sizeSmallsizeSmall

Styles applied to the root element if size="small".

.MuiRating-sizeMediumsizeMedium

Styles applied to the root element if size="medium".

.MuiRating-sizeLargesizeLarge

Styles applied to the root element if size="large".

.Mui-readOnlyreadOnlySTATE

Styles applied to the root element if readOnly={true}.

.Mui-disableddisabledSTATE

State class applied to the root element if disabled={true}.

.Mui-focusVisiblefocusVisibleSTATE

State class applied to the root element if keyboard focused.

.MuiRating-visuallyHiddenvisuallyHidden

Visually hide an element.

.MuiRating-labellabel

Styles applied to the label elements.

.MuiRating-labelEmptyValueActivelabelEmptyValueActive

Styles applied to the label of the "no value" input when it is active.

.MuiRating-iconicon

Styles applied to the icon wrapping elements.

.MuiRating-iconEmptyiconEmpty

Styles applied to the icon wrapping elements when empty.

.MuiRating-iconFillediconFilled

Styles applied to the icon wrapping elements when filled.

.MuiRating-iconHovericonHover

Styles applied to the icon wrapping elements when hover.

.MuiRating-iconFocusiconFocus

Styles applied to the icon wrapping elements when focus.

.MuiRating-iconActiveiconActive

Styles applied to the icon wrapping elements when active.

.MuiRating-decimaldecimal

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: