Rate
Rate picks a rating from a row of icons, stars by default. Hovering previews a value; clicking picks it. It is a radio group, so the keyboard and screen readers treat each value as a choice.
Demos
Basic
Give the rate an aria-label (or aria-labelledby) that says what is being rated.
Size
size is small, medium, large, or the icon size in pixels.
Count
count sets the number of icons, which is also the highest value.
Half values
With allowHalf, the start half of each icon picks half a point.
Readonly
readonly only shows the value, for example an average. Add allowHalf to draw half icons.
Clearable
With clearable, picking the current value again clears it to null.
Color
color replaces the theme’s fill for this rate. Prefer an alias role such as var(--rw-alias-fill-accent) so it follows the theme.
Icon
icon replaces the star. Draw it with currentColor so it takes the empty and filled colors.
Controlled
Pass value and onUpdateValue to own the state. onUpdateHoverValue reports the previewed value while the pointer is over the icons.
Accessibility
The rate is a role="radiogroup" with one role="radio" per value, labelled “3 of 5” (two per icon with allowHalf, so “2.5 of 5” is announced too). Only the checked radio is in the tab order. Arrow keys step the value, Home and End jump to the lowest and highest, Space and Enter pick the focused radio. With clearable, Delete and Backspace clear the value, as does stepping below the lowest. A readonly rate is a single role="img" whose label reads the value, after your aria-label if you gave one. The labels come from the locale (Rate.valueText).
Props
| Name | Type | Default | Description | Version |
|---|---|---|---|---|
value | number | null | undefined | Current value when controlled. null means no rating. | Unreleased |
defaultValue | number | null | null | Initial value when uncontrolled. | Unreleased |
onUpdateValue | (value: number | null) => void | undefined | Called with the new value when the user picks or clears one. | Unreleased |
onUpdateHoverValue | (value: number | null) => void | undefined | Called with the previewed value, and null once the pointer leaves. | Unreleased |
onClear | () => void | undefined | Called after the value is cleared. | Unreleased |
count | number | 5 | Number of icons, which is also the highest value. | Unreleased |
allowHalf | boolean | false | Lets each icon take half a point. | Unreleased |
clearable | boolean | false | Picking the current value again clears it. | Unreleased |
readonly | boolean | false | Shows the value without letting the user change it. | Unreleased |
size | small | medium | large | number | medium | Icon size; a number is in pixels. | Unreleased |
color | string | undefined | Color of the filled icons. | Unreleased |
icon | ReactNode | star | Replaces the star. | Unreleased |
Rate also accepts native div attributes and a ref. Set a custom icon with the icon prop.