Rating

Ratings are used to provide feedback on a scale.

1
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.

Average Rating

Sizes

The Rating component supports two sizes: sm, and md. The default size is sm.

This is a medium label

Primitives

You can utilize the primitive components 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

This is a custom 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.

1
import { Rating, RatingParts } from '@cerberus/react'

Usage

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.

Average Rating

Sizes

The Rating component supports two sizes: sm, and md. The default size is sm.

This is a medium label

Primitives

You can utilize the primitive components 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

This is a custom 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.

1
import { Rating, RatingParts } from '@cerberus/react'

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

This is a custom rating

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.

1
import { Rating, RatingParts } from '@cerberus/react'

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

This is a custom rating

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.