A rating indicates user interest in content.


import { Rate } from 'rsuite';

import Rate from 'rsuite/Rate';




The size of the rate component


The color of the rate component

Half ratings

Vertical direction

Direction when half select

Hover feedback

Disabled and read only


You can use other icons, emoji, numbers, Chinese or other custom patterns

Customized rates

When there are multiple levels of rating, you can customize the character displayed at each level, but you need to implement this yourself


WAI tutorial: https://www.w3.org/WAI/tutorials/forms/custom-controls/#a-star-rating


Property Type (Default) Description
allowHalf boolean(false) Whether to support half option
character ReactNode custom character
cleanable boolean(true) Whether clear is supported
defaultValue number(0) Default value
disabled boolean(false) Disabled,Cannot interact when value is true
max number(5) Maximum score
renderCharacter (value: number) => ReactNode Customize the render character function
readOnly boolean Whether it is read-only, if true, no interaction is possible
size enum: 'lg', 'md', 'sm', 'xs' ('md') Set component size
color enum: 'red', 'orange','yellow', 'green',
'cyan', 'blue', 'violet'
A button can have different colors
value number Value (Controlled)
vertical boolean(false) direction when half select
onChange (value: ValueType, event) => void Callback function that changes value
onChangeActive (value: number, event) => void Callback function that is fired when the hover state changes.