Rate

Rate component.

When To Use

Show evaluation.
A quick rating operation on something.

Examples

The simplest usage.

TypeScript
JavaScript
import React from 'react';
import { Rate } from 'antd';

const App: React.FC = () => <Rate />;

export default App;

Show copywriting

Add copywriting in rate components.

TypeScript
JavaScript
import React, { useState } from 'react';
import { Rate } from 'antd';

const desc = ['terrible', 'bad', 'normal', 'good', 'wonderful'];

const App: React.FC = () => {
  const [value, setValue] = useState(3);

  return (
    <span>
      <Rate tooltips={desc} onChange={setValue} value={value} />
      {value ? <span className="ant-rate-text">{desc[value - 1]}</span> : ''}
    </span>
  );
};

export default App;

Clear star

Support set allow to clear star when click again.

TypeScript
JavaScript
import React from 'react';
import { Rate } from 'antd';

const App: React.FC = () => (
  <>
    <Rate defaultValue={3} />
    <span className="ant-rate-text">allowClear: true</span>
    <br />
    <Rate allowClear={false} defaultValue={3} />
    <span className="ant-rate-text">allowClear: false</span>
  </>
);

export default App;

Customize character

Can customize each character using (RateProps) => ReactNode.

TypeScript
JavaScript
import React from 'react';
import { FrownOutlined, MehOutlined, SmileOutlined } from '@ant-design/icons';
import { Rate } from 'antd';

const customIcons: Record<number, React.ReactNode> = {
  1: <FrownOutlined />,
  2: <FrownOutlined />,
  3: <MehOutlined />,
  4: <SmileOutlined />,
  5: <SmileOutlined />,
};

const App: React.FC = () => (
  <>
    <Rate defaultValue={2} character={({ index }: { index: number }) => index + 1} />
    <br />
    <Rate defaultValue={3} character={({ index }: { index: number }) => customIcons[index + 1]} />
  </>
);

export default App;

Half star

Support select half star.

TypeScript
JavaScript
import React from 'react';
import { Rate } from 'antd';

const App: React.FC = () => <Rate allowHalf defaultValue={2.5} />;

export default App;

Read only

Read only, can't use mouse to interact.

TypeScript
JavaScript
import React from 'react';
import { Rate } from 'antd';

const App: React.FC = () => <Rate disabled defaultValue={2} />;

export default App;

Other Character

Replace the default star to other character like alphabet, digit, iconfont or even Chinese word.

TypeScript
JavaScript
import React from 'react';
import { HeartOutlined } from '@ant-design/icons';
import { Rate } from 'antd';

const App: React.FC = () => (
  <>
    <Rate character={<HeartOutlined />} allowHalf />
    <br />
    <Rate character="A" allowHalf style={{ fontSize: 36 }} />
    <br />
    <Rate character="好" allowHalf />
  </>
);

export default App;

API

Property	Description	type	Default	Version
allowClear	Whether to allow clear when click again	boolean	true
allowHalf	Whether to allow semi selection	boolean	false
autoFocus	If get focus when component mounted	boolean	false
character	The custom character of rate	ReactNode \| (RateProps) => ReactNode	<StarFilled />	function(): 4.4.0
className	The custom class name of rate	string	-
count	Star count	number	5
defaultValue	The default value	number	0
disabled	If read only, unable to interact	boolean	false
style	The custom style object of rate	CSSProperties	-
tooltips	Customize tooltip by each character	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

Global Token

Token Name	Description	Type	Default Value
colorFillContent	Control the background color of content area.	string	rgba(0, 0, 0, 0.06)
colorText	Default text color which comply with W3C standards, and this color is also the darkest neutral color.	string	rgba(0, 0, 0, 0.88)
controlHeightLG	LG component height	number	40
fontFamily	The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics.	string	-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
fontSize	The most widely used font size in the design system, from which the text gradient will be derived.	number	14
lineHeight	Line height of text.	number	1.5714285714285714
lineWidth	Border width of base components	number	1
marginXS	Control the margin of an element, with a small size.	number	8
motionDurationMid	Motion speed, medium speed. Used for medium element animation interaction.	string	0.2s

import React, { useState } from 'react'; import { Rate } from 'antd'; const desc = ['terrible', 'bad', 'normal', 'good', 'wonderful']; const App: React.FC = () => { const [value, setValue] = useState(3); return ( <Rate tooltips={desc} onChange={setValue} value={value} /> {value ? {desc[value - 1]} : ''} ); }; export default App;

import React from 'react'; import { Rate } from 'antd'; const App: React.FC = () => ( <> <Rate defaultValue={3} /> allowClear: true <Rate allowClear={false} defaultValue={3} /> allowClear: false </> ); export default App;

import React from 'react'; import { FrownOutlined, MehOutlined, SmileOutlined } from '@ant-design/icons'; import { Rate } from 'antd'; const customIcons: Record<number, React.ReactNode> = { 1: <FrownOutlined />, 2: <FrownOutlined />, 3: <MehOutlined />, 4: <SmileOutlined />, 5: <SmileOutlined />, }; const App: React.FC = () => ( <> <Rate defaultValue={2} character={({ index }: { index: number }) => index + 1} /> <Rate defaultValue={3} character={({ index }: { index: number }) => customIcons[index + 1]} /> </> ); export default App;

import React from 'react'; import { HeartOutlined } from '@ant-design/icons'; import { Rate } from 'antd'; const App: React.FC = () => ( <> <Rate character={<HeartOutlined />} allowHalf /> <Rate character="A" allowHalf style={{ fontSize: 36 }} /> <Rate character="好" allowHalf /> </> ); export default App;

API

Property	Description	type	Default	Version
allowClear	Whether to allow clear when click again	boolean	true
allowHalf	Whether to allow semi selection	boolean	false
autoFocus	If get focus when component mounted	boolean	false
character	The custom character of rate	ReactNode \| (RateProps) => ReactNode	<StarFilled />	function(): 4.4.0
className	The custom class name of rate	string	-
count	Star count	number	5
defaultValue	The default value	number	0
disabled	If read only, unable to interact	boolean	false
style	The custom style object of rate	CSSProperties	-
tooltips	Customize tooltip by each character	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)	-

Name

Description

blur()

Remove focus

focus()

Get focus

Token Name

Description

Type

Default Value

colorFillContent

Control the background color of content area.

string

rgba(0, 0, 0, 0.06)

colorText

Default text color which comply with W3C standards, and this color is also the darkest neutral color.

string

rgba(0, 0, 0, 0.88)

controlHeightLG

LG component height

number

fontFamily

The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics.

string

-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'

fontSize

The most widely used font size in the design system, from which the text gradient will be derived.

number

lineHeight

Line height of text.

number

1.5714285714285714

lineWidth

Border width of base components

number

marginXS

Control the margin of an element, with a small size.

number

motionDurationMid

Motion speed, medium speed. Used for medium element animation interaction.

string

0.2s