imitation
Rate
A star rating input.
Interview ratingClick a star or use the arrow keys
3 / 5
In context
Interview debriefPriya scores call 11 before she files the notes
PNCrew interview 1121 Oct, 11:30
How useful was this conversation?
Props
| Prop | Type | Required | Default |
|---|---|---|---|
value | number | undefined | No | — |
defaultValue | number | undefined | No | 0 |
count | number | undefined | No | 5 |
disabled | boolean | undefined | No | — |
onChange | ((value: number) => void) | undefined | No | — |
aria-label | string | undefined | No | Rating |
className | string | undefined | No | — |
Accessibility
role="radiogroup" over real role="radio" buttons, one per star, each labeled "N stars" — Left/Down decreases, Right/Up increases, matching the standard radio-group keyboard pattern. Only the checked (or first) star sits in the Tab order; the rest are reached via arrow keys, not Tab, same as any other radio group.
data-rebar-* attributes
data-rebar-component="rate", data-rebar-part="star" on each star.
Migrating to Ant Design
AntD's Rate has the same value/defaultValue/count/disabled/onChange shape, plus an allowHalf option this component doesn't support yet (a real, stated scope limitation, not an oversight — half-star hit-testing is real added complexity deferred for now). Not yet codemod-covered.