Rating
The Rating component provides a way to select a value from a range of values, typically used for feedback on a scale.
import { Rating, RatingParts } from '@cerberus/react'Usage
The Rating component is an abstracted client component that provides a way to select a value from a range of values. It is used to provide feedback on a scale. The default count is 5, and the default value is 0.
Readonly State
To render the Rating component in a read-only state, you can use the readOnly prop.
Orientation
The Rating component supports two layout orientations for label usage: horizontal, and vertical. The default orientation is vertical.
Sizes
The Rating component supports two sizes: sm, and md. The default size is sm.
Primitives
You can utilize the primitive components or the css prop to customize the radio.
| Component | Description |
|---|---|
| RatingRoot | The context provider for the Rating parts |
| RatingLabel | The label of the rating |
| RatingControl | The visual control of the rating |
| RatingContext | The context provider for the rating |
| RatingItem | The container of the rating item |
| RatingItemContext | The context provider for a rating item |
| RatingHiddenInput | The native input for the rating |
API
Props
Rating
The Rating component is an abstraction of the primitives and accepts the following props:
| Name | Default | Description |
|---|---|---|
| orientation | horizontal | This orientation of the group. |
| palette | action | The color palette of the items . |
| size | sm | The size of the label. |
The Rating component also accepts all the props of the RatingRoot primitive props
Parts
The RatingParts API is an Object containing the full family of components.
| Name | Description |
|---|---|
| Root | The RatingRoot component which is the Provider for the family. |
| Label | The RatingLabel component which displays the label. |
| Control | The RatingControl component which displays the visual rating. |
| Item | The RatingItem component which is the container to a single item. |
| ItemContext | The RatingItemContext component which is the context provider for a single item. |
| HiddenInput | The RatingHiddenInput component which displays the native radio. |
On this page