Usage
Color
Size
xs
sm
md
lg
xl
Controlled
Read only
Fractions
Fractions: 2
Fractions: 3
Fractions: 4
Custom symbol
Symbols for each item
Rating component props
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 |
Rating component Styles API
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 |