Rate
A rating indicates user interest in content.
Import
import { Rate } from 'rsuite';Examples
Basic
Sizes
The size of the rate component
Color
The color of the rate component. Supports both preset theme colors and custom colors (hex, rgb, etc.).
Half Star
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
Fractional ratings
Advanced rating
Accessibility
WAI tutorial: https://www.w3.org/WAI/tutorials/forms/custom-controls/#a-star-rating
Props
<Rate>
| 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) |
The default value (uncontrolled) |
| 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 | Size | number | string | Set component size |
| color | Color | CSSProperties['color'] | Set component color. Supports preset theme colors and custom colors (hex, rgb, etc.) |
| value | number | The current 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. |
Color
type Color = 'red' | 'orange' | 'yellow' | 'green' | 'cyan' | 'blue' | 'violet';
Size
type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';