Rating

Rating Component
Import

Usage

Color
Size
xs
sm
md
lg
xl
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

Fractions: 2
Fractions: 3
Fractions: 4
import { Rating, Group, Stack } from '@mantine/core';
function Demo() {
return (
<Stack>
<Group>
<div>Fractions: 2</div>
<Rating fractions={2} defaultValue={1.5} />
</Group>
<Group>
<div>Fractions: 3</div>
<Rating fractions={3} defaultValue={2.33333333} />
</Group>
<Group>
<div>Fractions: 4</div>
<Rating fractions={4} defaultValue={3.75} />
</Group>
</Stack>
);
}

Custom symbol

import { Group, Rating } from '@mantine/core';
import { IconSun, IconMoon } from '@tabler/icons';
function Demo() {
return (
<Group position="center">
<Rating emptySymbol={<IconSun />} fullSymbol={<IconMoon />} />
</Group>
);
}

Symbols for each item

import { Rating, useMantineTheme } from '@mantine/core';
import {
IconMoodEmpty,
IconMoodCry,
IconMoodSad,
IconMoodSmile,
IconMoodHappy,
IconMoodCrazyHappy,
} from '@tabler/icons';
function Demo() {
const getEmptyIcon = (value: number) => {
const defaultProps = {
size: 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: 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 />
);
}
Download more icon variants from https://tabler-icons.io/i/search

Rating component props

NameTypeDescription
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

Rating component Styles API

NameStatic selectorDescription
root.mantine-Rating-rootRoot element
symbolGroup.mantine-Rating-symbolGroupContainer for fraction symbols
input.mantine-Rating-inputInput element
label.mantine-Rating-labelLabel element
symbolBody.mantine-Rating-symbolBodyElement inside label that hold symbol icon