Forms

Rating

A star rating that is a real radio group.

Client componentSource

Import

import { Rating } from '@the_viveksingh/vivek-ui'

Pick a rating

A real radio group under the icons, so arrow keys work and it submits in a form. allowClear lets someone undo a mis-click, which a plain radio group cannot.

How was your experience?
Half steps
Out of ten
<Rating defaultValue={4} label="How was your experience?" allowClear />
<Rating defaultValue={3} allowHalf size="lg" label="Half steps" />
<Rating defaultValue={2} max={10} size="sm" label="Out of ten" />

Read-only

For displaying an average. It renders as text to assistive technology rather than as a control nobody can operate.

Average rating
With halves
<Rating value={4} readOnly label="Average rating" />
<Rating value={3.5} allowHalf readOnly size="sm" label="With halves" />

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Rating
PropTypeDefaultDescription
valuenumber—Controlled value. `0` means "not rated".
defaultValuenumber—Uncontrolled initial value. Default `0`.
onValueChange(value: number) => void——
maxnumber—Number of icons. Default `5`.
allowHalfboolean—Allow half steps — 0.5, 1, 1.5 …
readOnlyboolean—Render as static output: no radios, no keyboard target, no form value.
size'sm' | 'md' | 'lg'——
iconReactNode—The glyph. Defaults to a CSS-drawn star, so no icon package is needed.
labelReactNode—Group label, rendered as the `<legend>`. Falls back to `aria-label`.
namestring—Shared radio `name`. Generated when omitted, so grouping always works.
disabledboolean——
invalidboolean—Sets `aria-invalid` on the group. Injected by `Field`.
requiredboolean—Injected by `Field`. Also suppresses the "no rating" option.
allowClearboolean—Offer a focusable "no rating" radio, so the keyboard can clear a value that native radios otherwise make permanent. Default `true` unless `required`.
formatLabel(value: number, max: number) => string—Accessible name for one option and for the read-only summary.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering