Go to AntUIKit homepage

Rate

A score expressed as a row of glyphs, with half values, a custom character and a tooltip per step.

Preview in FigmaLLMs

Accessibility

What Rate announces, what the keyboard can reach, and the two things you have to add: what the scale is for, and the score.

What screen readers hear

Each star is a radio that announces its position, like “radio, 2 of 5”. The root is a focusable list with no radio group role, so nothing announces what the scale is for or the score as one number.
  • Every star up to the value reads as checked, so a score of 4 is four checked radios. A half value checks its own star too.
  • An aria-label you pass lands on that root list.
Treat the stars as a picture, and make sure the score also exists as text.

Keyboard

  • The root and every star are tab stops, so a default Rate takes six presses of Tab to pass. In a long form, that adds up.
  • Arrow Right adds a step and Arrow Left removes one, from 0 to count. The step is 0.5 with allowHalf.
  • In RTL the two arrows swap. Set the direction on the provider, not with CSS, or they do not.
  • Enter on a focused star selects it. Space, Up, Down, Home and End do nothing.
  • keyboard={false} turns off the arrows but keeps the tab stops. Use it only when something above the Rate owns the arrow keys.
  • Arrow Left down to 0 is the keyboard way to clear a rating, whatever allowClear is set to.

Naming it, and announcing the score

Nothing Rate renders says what the scale is for or what the score is. Supply both.
  • Put a visible label beside the control. In a form, the Form.Item label does it.
  • Where there is no room, pass aria-label. It names the list rather than a radio group, so a visible label is better.
  • Write the score as a number, like “4 out of 5”, in visible or visually hidden text.
  • tooltips do not name a star. They describe the star only while open on hover, so keyboard and screen reader users never get them. If the step names matter, write them as text, like a legend under the row.

Display-only scores

  • disabled takes the root and every star out of the tab order, so keyboard users cannot land on it to hear the score.
  • It adds no aria-disabled or aria-readonly, so the stars still announce as checked and unchecked radios.
  • Write a display-only score as text, like “4.5 out of 5”. Keep the stars beside it as decoration, hidden with aria-hidden on a wrapper. A disabled Rate has nothing focusable inside, so hiding it is safe.

Contrast

Check two pairs: the filled star against the surface, and the unfilled star against the same surface. The unfilled one is the one that fails.
  • Unfilled stars use starBg, a light fill, so the length of the scale shows at low contrast. Raise starBg where the empty stars must be legible, and check it on the surface the Rate sits on.
  • Filled stars use starColor, yellow by default, which is weak against white. The glyph shape carries the meaning.
  • The focus ring is a dashed outline in starColor, so recoloring the star recolors the ring. Check the ring against the surface.
  • The ring shows for keyboard focus only, so a mouse click leaves none.

Target size and motion

  • The click target is one star. At the default size, the spacing between stars is what meets the 24px minimum target size. At size="small" it does not, so use small only for display-only scores.
  • Use size="large" for the one Rate a page asks the reader to set.
  • Hovering a star scales it up with a transition, and Rate does not check the reduced motion setting. Turn motion off through the theme with a ThemeScope whose light and dark configs both set token: { motion: false }. Never nest a bare ConfigProvider to do it.
RadioResult
© 2026 AntUIKit . All rights reserved.