Rate

Used for rating operation on something.

When To Use

Show evaluation.
A quick rating operation on something.

Examples

Basic · basic
Sizes · size
Half star · half
Show copywriting · text
Read only · disabled
Clear star · clear
Other Character · character
Customize character · character-function

API

Common props ref：Common props

Property	Description	Type	Default	Version	Global Config
allowClear	Whether to allow clear when click again	boolean	true		×
allowHalf	Whether to allow semi selection	boolean	false		×
character	The custom character of rate	ReactNode \| (RateProps) => ReactNode	<StarFilled />	function(): 4.4.0	×
count	Star count	number	5		×
defaultValue	The default value	number	0		×
disabled	If read only, unable to interact	boolean	false		×
keyboard	Support keyboard operation	boolean	true	5.18.0	×
size	Star size	'small' \| 'medium' \| 'large'	'medium'		×
tooltips	Customize tooltip by each character	TooltipProps[] \| string[]	-		×
value	The current value	number	-		×
onBlur	Callback when component lose focus	function()	-		×
onChange	Callback when select value	function(value: number)	-		×
onFocus	Callback when component get focus	function()	-		×
onHoverChange	Callback when hover item	function(value: number)	-		×
onKeyDown	Callback when keydown on component	function(event)	-		×

Methods

Name	Description
blur()	Remove focus
focus()	Get focus

Design Token

Types, inheritance and declarations retain the pinned native source. Defaults are computed by the native theme and may be overridden by ConfigProvider; this table does not invent static defaults.

Token	Type	Native description
`starColor`	`string`	Star color
`starSize`	`number`	Star size
`starSizeSM`	`number`	Small star size
`starSizeLG`	`number`	Large star size
`starHoverScale`	`CSSObject['transform']`	Scale of star when hover
`starBg`	`string`	Star background color

Declaration source: vendor/components/rate/style/index.ts

import type { CSSObject } from '@ant-design/cssinjs';

import { unit } from '@ant-design/cssinjs';

import { resetComponent } from '../../style';

import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';

import { genStyleHooks, mergeToken } from '../../theme/internal';

export interface ComponentToken {
  /**
   * @desc 星星颜色
   * @descEN Star color
   */
  starColor: string;
  /**
   * @desc 星星尺寸
   * @descEN Star size
   */
  starSize: number;
  /**
   * @desc 小星星尺寸
   * @descEN Small star size
   */
  starSizeSM: number;
  /**
   * @desc 大星星尺寸
   * @descEN Large star size
   */
  starSizeLG: number;
  /**
   * @desc 星星悬浮时的缩放
   * @descEN Scale of star when hover
   */
  starHoverScale: CSSObject['transform'];
  /**
   * @desc 星星背景色
   * @descEN Star background color
   */
  starBg: string;
}

interface RateToken extends FullToken<'Rate'> {}

Shared native props

Tips: The following generic properties apply to most antd components; those not supported are described separately.

Property	Description	Type	Default
style	The additional style	CSSProperties	-
className	The additional css class	string	-
rootClassName	ClassName on the root element	string	-
autoFocus	Auto focus when component mounted, only effective for focusable elements like forms, links, etc.	boolean	false

Install and reproduce an example

npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23

Use ConfigProvider and native App; configure dayjs locale separately. Each example lists its complete source files and additional pinned dependencies in View code. Example names select demos, not universal component props. See the resource setup guide for theme, locale and SSR.

Native type references

The source viewer includes unchanged native implementations and the following source declarations. Inherited types remain in their native packages. English source comments are preserved as code reference.

vendor/components/rate/index.tsx
vendor/components/rate/style/index.ts

Source and license

https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd

Original bilingual prose and executable examples are retained. Website-only embeds and token tables are expanded locally. Ant Design is MIT; separately listed dependency notices also apply. Upload previews block outbound requests and do not provide a backend.