Drawer Content Here
- Sign Out
Basic Ratings

Use `name` prop to name the rating and use `value` or `defaultValue` prop to set any initial value to a rating.

Controlled

1 Star
2 Stars
3 Stars
4 Stars
5 StarsEmpty

Read only

Disabled

1 Star
2 Stars
3 Stars
4 Stars
5 Stars

No rating given

1 Star
2 Stars
3 Stars
4 Stars
5 StarsEmpty

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

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

    const RatingsBasic = () => {
      // ** State
      const [value, setValue] = useState(2)

      return (
        <div>
          <Box sx={{ mb: 3 }}>
            <Typography sx={{ fontWeight: 500 }}>Controlled</Typography>
            <Rating value={value} name='simple-controlled' onChange={(event, newValue) => setValue(newValue)} />
          </Box>
          <Box sx={{ mb: 3 }}>
            <Typography sx={{ fontWeight: 500 }}>Read only</Typography>
            <Rating readOnly value={value} name='read-only' />
          </Box>
          <Box sx={{ mb: 3 }}>
            <Typography sx={{ fontWeight: 500 }}>Disabled</Typography>
            <Rating disabled value={value} name='disabled' />
          </Box>
          <div>
            <Typography sx={{ fontWeight: 500 }}>No rating given</Typography>
            <Rating value={null} name='no-value' />
          </div>
        </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

0.5 Stars
1 Star
1.5 Stars
2 Stars 2.5 Stars 3 Stars 3.5 Stars 4 Stars 4.5 Stars 5 Stars Empty

Custom icon and color

0.5 Stars 1 Star 1.5 Stars 2 Stars 2.5 Stars 3 Stars 3.5 Stars 4 Stars 4.5 Stars 5 Stars Empty

10 stars

1 Star
2 Stars
3 Stars
4 Stars
5 Stars
6 Stars
7 Stars
8 Stars
9 Stars
10 StarsEmpty

Custom icon set

1 Star 2 Stars 3 Stars 4 StarsEmpty

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

    // ** Icon Imports
    import Icon from 'src/@core/components/icon'

    const customIcons = {
      1: {
        label: 'Very Dissatisfied',
        icon: 'tabler:mood-sad'
      },
      2: {
        label: 'Neutral',
        icon: 'tabler:mood-empty'
      },
      3: {
        label: 'Satisfied',
        icon: 'tabler:mood-smile'
      },
      4: {
        label: 'Very Satisfied',
        icon: 'tabler:mood-happy'
      }
    }

    const IconContainer = props => {
      const { value } = props

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

    const RatingsCustomized = () => {
      return (
        <div>
          <Box sx={{ mb: 3 }}>
            <Typography sx={{ fontWeight: 500 }}>Custom empty icon</Typography>
            <Rating
              precision={0.5}
              defaultValue={2}
              name='customized-empty'
              emptyIcon={<Icon icon='mdi:star' fontSize='1.5rem' />}
            />
          </Box>
          <Box sx={{ mb: 3 }}>
            <Typography sx={{ fontWeight: 500 }}>Custom icon and color</Typography>
            <Rating
              precision={0.5}
              defaultValue={3}
              name='customized-color'
              sx={{ color: 'error.main' }}
              icon={<Icon icon='mdi:heart' />}
              emptyIcon={<Icon icon='mdi:heart' />}
            />
          </Box>
          <Box sx={{ mb: 3 }}>
            <Typography sx={{ fontWeight: 500 }}>10 stars</Typography>
            <Rating name='customized-10' defaultValue={7} max={10} />
          </Box>
          <div>
            <Typography sx={{ fontWeight: 500 }}>Custom icon set</Typography>
            <Rating name='customized-icons' defaultValue={2} max={4} IconContainerComponent={IconContainer} />
          </div>
        </div>
      )
    }

    export default RatingsCustomized

Half Ratings

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

Half Ratings

0.5 Stars
1 Star
1.5 Stars
2 Stars
2.5 Stars
3 Stars
3.5 Stars
4 Stars
4.5 Stars
5 Stars Empty

Read only

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

    const RatingsHalf = () => {
      return (
        <div>
          <Box sx={{ mb: 3 }}>
            <Typography sx={{ fontWeight: 500 }}>Half Ratings</Typography>
            <Rating defaultValue={2.5} precision={0.5} name='half-rating' />
          </Box>
          <div>
            <Typography sx={{ fontWeight: 500 }}>Read only</Typography>
            <Rating readOnly defaultValue={2.5} precision={0.5} name='read-only' />
          </div>
        </div>
      )
    }

    export default RatingsHalf

Sizes

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

1 Star
2 Stars
3 Stars
4 Stars
5 StarsEmpty
1 Star
2 Stars
3 Stars
4 Stars
5 StarsEmpty
1 Star
2 Stars
3 Stars
4 Stars
5 StarsEmpty

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

    const RatingsSizes = () => {
      return (
        <Box className='demo-space-y' sx={{ display: 'flex', flexDirection: 'column' }}>
          <Rating defaultValue={2} name='size-small' size='small' />
          <Rating defaultValue={2} name='size-medium' />
          <Rating defaultValue={2} name='size-large' size='large' />
        </Box>
      )
    }

    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.

0.5 Stars
1 Star
1.5 Stars
2 Stars
2.5 Stars
3 Stars
3.5 Stars
4 Stars
4.5 Stars
5 Stars Empty

Poor+

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

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

    const labels = {
      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(-1)
      const [value, setValue] = useState(2)

      return (
        <Box sx={{ display: 'flex', alignItems: 'center' }}>
          <Rating
            value={value}
            precision={0.5}
            name='hover-feedback'
            sx={{ mr: 4 }}
            onChange={(event, newValue) => setValue(newValue)}
            onChangeActive={(event, newHover) => setHover(newHover)}
          />
          {value !== null && <Typography>{labels[hover !== -1 ? hover : value]}</Typography>}
        </Box>
      )
    }

    export default RatingsHoverFeedback