# Rate

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

Graphical representation of the degree of rating scale.

## Install

```bash
npm install antd-mobile@5.43.0
```

antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register `createRoot` with `unstableSetRender` at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with `<html data-prefers-color-scheme="dark">`.

Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as `DemoBlock` are JGuang rewrites, not antd-mobile APIs.

Graphical representation of the degree of rating scale.

## When to Use

Useful for showing things ratings and quick scoring.

## Demos

## Rate

### Props

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| allowClear | Whether to allow clearing after another click. | `boolean` | `true` |
| allowHalf | Whether to allow the selection of half. | `boolean` | `false` |
| character | Custom character. | `ReactNode` | The default star shape. |
| count | Total number of stars. | `number` | `5` |
| defaultValue | The default value of rate. | `number` | `0` |
| onChange | Callback when select. | `(value: number) => void` | - |
| readOnly | The component is uninteractable when `true`. | `boolean` | `false` |
| value | The value of rate. | `number` | - |

### CSS Variables

| Name | Description | Default |
| --- | --- | --- |
| --active-color | Fill color when active. | `var(--adm-color-yellow)` |
| --star-size | Star size. | `24px` |
| --inactive-color | Fill color when inactive. | `var(--adm-color-border)` |
| --inactive-color-half | Fill color when inactive(half-selected mode - left half). | `var(--adm-color-border)` |

---

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