Rate

Rate is used for scoring.

Install

npm install @arco-design/web-react@2.66.18

Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.

Examples

Basic: Basic usage of Rate.
Allow Half: Specify allowHalf to support half selection.
With Text: Use Rate with text description.
Read Only: Specify Rate as read-only via readonly.
Allow Clear: Specify allowClear to allow clearing of ratings. 指定 allowClear 来允许清除评分。
Custom Character: Use character to customize the characters used in Rate.
Customize Count: Create a score component of any total count by specifying count.
Smiley Icon: Use grading to show score with smiley icons.
Tooltips: Use tooltips to provide hint information for each rating when the mouse is hovering.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

API

Rate

Property	Description	Type	DefaultValue
allowClear	Whether to allow clear when click again	boolean	`-`
allowHalf	Whether to allow half selection	boolean	`-`
disabled	Whether is disabled	boolean	`-`
grading	Whether to show score with smiley icon	boolean	`-`
readonly	Whether is readonly	boolean	`-`
count	Star count	number	`5`
defaultValue	To set default value	number	`-`
value	To set value	number	`-`
className	Additional css class	string \| string[]	`-`
style	Additional style	CSSProperties	`-`
tooltips	Customize tooltip by each character	string[]	`-`
character	The custom character of rate	ReactNode \| ((index: number) => ReactNode)	`<IconStarFill />`
onChange	Callback when score is changed	(value: number) => void	`-`
onHoverChange	Callback when the score user hovered is changed	(value: number) => void	`-`