Rating

Usage

import { Rating } from '@mantine/core';

function Demo() {
  return <Rating defaultValue={2} />
}

Controlled

import { useState } from 'react';
import { Rating } from '@mantine/core';

function Demo() {
  const [value, setValue] = useState(0);
  return <Rating value={value} onChange={setValue} />;
}

Read only

import { Rating, Group } from '@mantine/core';

function Demo() {
  return (
    <Group position="center">
      <Rating value={3.5} fractions={2} readOnly />
    </Group>
  );
}

Fractions

Custom symbol

import { Group, Rating } from '@mantine/core';
import { IconSun, IconMoon } from '@tabler/icons-react';

function Demo() {
  return (
    <Group position="center">
      <Rating emptySymbol={<IconSun size="1rem" />} fullSymbol={<IconMoon size="1rem" />} />
    </Group>
  );
}

Symbols for each item

import { Rating, useMantineTheme, rem } from '@mantine/core';
import {
  IconMoodEmpty,
  IconMoodCry,
  IconMoodSad,
  IconMoodSmile,
  IconMoodHappy,
  IconMoodCrazyHappy,
} from '@tabler/icons-react';

function Demo() {

  const getEmptyIcon = (value: number) => {
    const defaultProps = { size: rem(24), color: 'gray' };
    switch (value) {
      case 1:
        return <IconMoodCry {...defaultProps} />;
      case 2:
        return <IconMoodSad {...defaultProps} />;
      case 3:
        return <IconMoodSmile {...defaultProps} />;
      case 4:
        return <IconMoodHappy {...defaultProps} />;
      case 5:
        return <IconMoodCrazyHappy {...defaultProps} />;
      default:
        return <IconMoodEmpty {...defaultProps} />;
    }
  };

  const getFullIcon = (value: number) => {
    const defaultProps = { size: rem(24) };
    const theme = useMantineTheme();

    switch (value) {
      case 1:
        return <IconMoodCry {...defaultProps} color={theme.colors.red[7]} />;
      case 2:
        return <IconMoodSad {...defaultProps} color={theme.colors.orange[7]} />;
      case 3:
        return <IconMoodSmile {...defaultProps} color={theme.colors.yellow[7]} />;
      case 4:
        return <IconMoodHappy {...defaultProps} color={theme.colors.lime[7]} />;
      case 5:
        return <IconMoodCrazyHappy {...defaultProps} color={theme.colors.green[7]} />;
      default:
        return <IconMoodEmpty {...defaultProps} />;
    }
  };

  return (
    <Rating emptySymbol={getEmptyIcon} fullSymbol={getFullIcon} highlightSelectedOnly />
  );
}

Go back

Radio – @mantine/core

Up next

SegmentedControl – @mantine/core

Name	Type	Description
color	MantineColor	Key of theme.colors or any CSS color value, yellow by default
count	number	Number of controls that should be rendered
defaultValue	number	Default value for uncontrolled component
emptySymbol	ReactNode \| ((value: number) => ReactNode)	The icon that is displayed when symbol is empty
fractions	number	Number of fractions each item can be divided into, 1 by default
fullSymbol	ReactNode \| ((value: number) => ReactNode)	This icon that is displayed when symbol is full
getSymbolLabel	(value: number) => string	Function should return labelText for the symbols
highlightSelectedOnly	boolean	If true, only the selected symbol will change to full symbol
name	string	Name of rating, should be unique within the page
onChange	(value: number) => void	Called when value changes
onHover	(value: number) => void	Called when item is hovered
readOnly	boolean	If true, you won't be able to interact
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	Controls component size
value	number	Value for controlled component

Name	Static selector	Description
root	.mantine-Rating-root	Root element
symbolGroup	.mantine-Rating-symbolGroup	Container for fraction symbols
input	.mantine-Rating-input	Input element
label	.mantine-Rating-label	Label element
symbolBody	.mantine-Rating-symbolBody	Element inside label that hold symbol icon

Rating

Usage

Controlled

Read only

Fractions

Custom symbol

Symbols for each item

Rating component props

Rating component Styles API