Rating
A 0-5 rating input, or a read only display of any number, even with decimals, between 0 and 5.
Examples
Interactive Rating
By default the Rating can be set by tapping a star. Tapping the selected star will deselect it.
import { Rating } from '@curology/ui-components-web/react/Rating';
<Rating
size="{sm|md(default)}"
defaultValue={2}
/>
Read Only Rating
When given the readOnly prop, the Rating will not accept user input.
import { Rating } from '@curology/ui-components-web/react/Rating';
<Rating
...
readOnly
value={3.5}
/>
Controlled Interactive Rating
Like all form inputs, a Rating can either be uncontrolled, or controlled (by providing a value and onChange listener).
import { Rating } from '@curology/ui-components-web/react/Rating';
<Rating
...
value={someValue}
onChange={handleChange}
/>
Props
RatingProps
| Name | Type | Default Value | Required | Description |
|---|---|---|---|---|
All attributes of a <input /> | ||||
defaultValue | string | number | No | The default value of the rating. | |
onChange | FormControlChangeEventHandler | No | Emit a new value when the input's selected value changes. | |
readOnly | false | true | | No | Can the field be interacted with? |
size | "md" | "sm" | 'md' | No | The size of the field. |
value | string | number | No | The current value of the rating. | |