Use a Slider when the value is continuous or the scale is long.
Use a Radio group when the options are named rather than ranked, like Bug, Feature and Question.
Use plain text or Statistic when the score is only shown, like “4.5 out of 5, 318 ratings”.
Use a Switch or a like button when the answer is yes or no.

count sets how many stars are drawn, and defaults to 5. People know where the top of a five-star scale is without a legend.

Past about seven stars, people count glyphs instead of reading the row. For a finer scale, ask for a number.
On a three-step scale, name the steps with tooltips so it does not read as a five-star row that failed to render.
Use the same count everywhere one score appears.
Screen readers announce each star against count, like “2 of 5”, so changing it changes what they hear.

allowHalf is off by default and allowClear is on.

allowHalf lets a click on the left half of a star pick a half step. It suits a displayed average better than an input, since half a star is a small target.
allowClear resets the value to 0 when the selected star is clicked again. Turn it off when the rating is required, or a click that looks like a confirmation empties the field.
A value of 0 also means “not rated”. If you need to tell the two apart, keep that in your own state.

character takes any node, or a function ({ index }) => node for a different glyph per position, like numbers or faces.

The default is your icon pack's filled star. Packs with no filled weight, like lucide and hugeicons, draw the outline.
A different glyph changes what the scale means. A heart reads as affection, a flame as intensity, a letter as a grade.
Rate draws one character in every position, grays out the unselected ones and clips it at half width for allowHalf. Pick a roughly square glyph with no color of its own. For emoji, dim the unselected ones with a class on .ant-rate-star-zero.
character={null} draws nothing.

disabled is Rate's read-only mode. It keeps the stars painted, stops hover and clicks, and takes the control out of the tab order.

Use it for a score in a card, a table cell or a review list.
A disabled Form or provider above the Rate disables it too. A disabled prop on the Rate wins over both.
A disabled Rate still announces five radios. Write a score that is only shown as text too, as the Accessibility tab describes.

tooltips takes one entry per star, in order, and shows it on hover.

Pass them when the ends of the scale are not obvious. Terrible, Bad, Normal, Good and Wonderful tell people whether 3 is neutral or poor.
Keep the words parallel and in order, since people read them one at a time.
An entry can also be a tooltip props object, to set placement or color per step.
Define the array outside the component. A new array on every render rebuilds every tooltip.
A tooltip only appears on hover, so it does not replace a visible label.

Write the score next to the stars, with the number of ratings: 4.5 out of 5 and 318 ratings.

The unselected stars are a light fill, so 4 of 5 and 4 of 6 can look alike on a busy surface. The number settles it, most of all with allowHalf.
Derive the text and the stars from the same value.
Reserve room for a label that changes on hover, so the row does not shift under the pointer.

On This Page