When To Use

Examples

Basic

Half star

Show copywriting

Rate

Radio Select

Rate

Rate component.

When To Use

Show evaluation.
A quick rating operation on something.

Examples

Basic

The simplest usage.

Show copywriting

Add copywriting in rate components.

Clear star

Support set allow to clear star when click again.

Customize character

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

Half star

Support select half star.

Read only

Read only, can't use mouse to interact.

Other Character

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

API

Common props ref：Common props

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

Namu Design

Rate

Namu Design

Rate

When To Use

Examples

API

Methods

Design Token

Global Token

When To Use

Examples

API

Methods

Design Token

Global Token

RateChangelog

RateChangelog

When To Use

Examples

API

Methods

Design Token

Global Token

When To Use

Examples

API

Methods

Design Token

Global Token

Rate

Rate