# Rate

- Page: https://jiguang132.com/resources/ant-design/docs/rate
- Resource: Ant Design (https://jiguang132.com/resources/ant-design.md)
- All guides: https://jiguang132.com/resources/ant-design/docs.md

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](#jguang-common-props)

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-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](/components/tooltip#api)[] \| 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`

```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 {#jguang-common-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

```bash
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.

---

Index of all JGuang resources: https://jiguang132.com/llms.txt