Rate

A rating indicates user interest in content.

Import

import { Rate } from 'rsuite';

//or
import Rate from 'rsuite/Rate';

Examples

Default

Sizes

The size of the rate component

Color

The color of the rate component

Half ratings

Vertical direction

Direction when half select

Hover feedback

Disabled and read only

Characters

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

Accessibility

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

Props

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 'lg' | 'md' | 'sm' | 'xs' ('md') Set component size
color Color A button can have different colors
value number Value (Controlled)
vertical boolean(false) direction when half select
onChange (value: number, event) => void Callback function that changes value
onChangeActive (value: number, event) => void Callback function that is fired when the hover state changes.

ts:Color

type Color = 'red' | 'orange' | 'yellow' | 'green' | 'cyan' | 'blue' | 'violet';