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

// React Imports
import { useState } from 'react'

// MUI Imports
import Rating from '@mui/material/Rating'
import Typography from '@mui/material/Typography'

const RatingsBasic = () => {
  // States
  const [value, setValue] = useState<number | null>(2)

  return (
    <>
      <div className='mbe-3'>
        <Typography className='font-medium' color='text.primary'>
          Controlled
        </Typography>
        <Rating value={value} name='basic-controlled' onChange={(event, newValue) => setValue(newValue)} />
      </div>
      <div className='mbe-3'>
        <Typography className='font-medium' color='text.primary'>
          Read only
        </Typography>
        <Rating readOnly value={value} name='read-only' />
      </div>
      <div className='mbe-3'>
        <Typography className='font-medium' color='text.primary'>
          Disabled
        </Typography>
        <Rating disabled value={value} name='disabled' />
      </div>
      <div>
        <Typography className='font-medium' color='text.primary'>
          No rating given
        </Typography>
        <Rating value={null} name='no-value' />
      </div>
    </>
  )
}

export default RatingsBasic
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

// MUI Imports
import Typography from '@mui/material/Typography'
import Rating from '@mui/material/Rating'
import type { IconContainerProps } from '@mui/material/Rating'

type CustomIcons = {
  [index: string]: { icon: string; label: string }
}

const customIcons: CustomIcons = {
  1: {
    label: 'Very Dissatisfied',
    icon: 'ri-emotion-unhappy-line'
  },
  2: {
    label: 'Neutral',
    icon: 'ri-emotion-normal-line'
  },
  3: {
    label: 'Satisfied',
    icon: 'ri-emotion-happy-line'
  },
  4: {
    label: 'Very Satisfied',
    icon: 'ri-emotion-line'
  }
}

const IconContainer = (props: IconContainerProps) => {
  const { value } = props

  return (
    <span {...props}>
      <i className={customIcons[value].icon} />
    </span>
  )
}

const RatingsCustomized = () => {
  return (
    <>
      <div className='mbe-3'>
        <Typography className='font-medium' color='text.primary'>
          Custom empty icon
        </Typography>
        <Rating name='customized-empty' defaultValue={2} precision={0.5} emptyIcon={<i className='ri-star-fill' />} />
      </div>
      <div className='mbe-3'>
        <Typography className='font-medium' color='text.primary'>
          Custom icon and color
        </Typography>
        <Rating
          precision={0.5}
          defaultValue={3}
          name='customized-color'
          icon={<i className='ri-heart-fill flex-shrink-0 text-error' />}
          emptyIcon={<i className='ri-heart-fill' />}
        />
      </div>
      <div className='mbe-3'>
        <Typography className='font-medium' color='text.primary'>
          10 stars
        </Typography>
        <Rating name='customized-10' defaultValue={7} max={10} />
      </div>
      <>
        <Typography className='font-medium' color='text.primary'>
          Custom icon set
        </Typography>
        <Rating name='customized-icons' defaultValue={2} max={4} IconContainerComponent={IconContainer} />
      </>
    </>
  )
}

export default RatingsCustomized
Half Ratings

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

Half Ratings

Read only

// MUI Imports
import Rating from '@mui/material/Rating'
import Typography from '@mui/material/Typography'

const RatingsHalf = () => {
  return (
    <>
      <div className='mbe-3'>
        <Typography className='font-medium' color='text.primary'>
          Half Ratings
        </Typography>
        <Rating defaultValue={2.5} precision={0.5} name='half-rating' />
      </div>
      <>
        <Typography className='font-medium' color='text.primary'>
          Read only
        </Typography>
        <Rating readOnly defaultValue={2.5} precision={0.5} name='read-only' />
      </>
    </>
  )
}

export default RatingsHalf
Sizes

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

// MUI Imports
import Rating from '@mui/material/Rating'

const RatingsSizes = () => {
  return (
    <div className='flex flex-col items-start gap-4'>
      <Rating defaultValue={2} name='size-small' size='small' />
      <Rating defaultValue={2} name='size-medium' />
      <Rating defaultValue={2} name='size-large' size='large' />
    </div>
  )
}

export default RatingsSizes
Hover Feedback

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

Poor+

// React Imports
import { useState } from 'react'

// MUI Imports
import Rating from '@mui/material/Rating'
import Typography from '@mui/material/Typography'

const labels: { [index: string]: string } = {
  0.5: 'Useless',
  1: 'Useless+',
  1.5: 'Poor',
  2: 'Poor+',
  2.5: 'Ok',
  3: 'Ok+',
  3.5: 'Good',
  4: 'Good+',
  4.5: 'Excellent',
  5: 'Excellent+'
}

const RatingsHoverFeedback = () => {
  // States
  const [hover, setHover] = useState<number>(-1)
  const [value, setValue] = useState<number | null>(2)

  return (
    <div className='flex items-center'>
      <Rating
        value={value}
        precision={0.5}
        name='hover-feedback'
        className='mie-4'
        onChange={(event, newValue) => setValue(newValue)}
        onChangeActive={(event, newHover) => setHover(newHover)}
      />
      {value !== null && <Typography color='text.primary'>{labels[hover !== -1 ? hover : value]}</Typography>}
    </div>
  )
}

export default RatingsHoverFeedback