Rating
Ratings are used to provide feedback on a scale.
- Use ratings to provide feedback on a scale
- Label should be scannable
- Use a five star scale
- For interactive ratings, use full stars
- Use half stars for read-only ratings
Example
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
On this page
Usage
Alternate selection controls
Rating buttons are one of several selection controls, which allow users to make choices such as rating an item on a scale of 1-5.
Alternate selection controls include: range sliders, and thumbs up/down.
On this page
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 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
Use Cases
- Users should be able to:
- Navigate to a radio button list item with assistive technology
- Select radio button
- Get appropriate feedback based on input type documented under Interaction & style
Interaction & Style
The radio button has two states: selected and unselected. There's a brief but important interaction where the user changes the states of the buttons by selecting an option.
Users should be able to select either the text label or the radio button to select an option. Once selected, there is always one radio button selected in the group, users can change their selection but they can't unselect.
Initial Focus
When in groups: Tab moves focus into the group's selected radio or the first radio if none are selected. Shift + Tab moves focus tothe last radio if none are selected
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | To move to the next element in a group |
| Shift + Tab | To select the last radio button item in a group |
| Arrows | To move up or down, between radio options and make a selection |
| Space | To select a focused radio option not yet selected |
Labeling Elements
If the UI text is correctly linked to the radio button, assistive tech (such as a screenreader) will read the UI text followed by the component’s role.
The accessibility label for a group of radio buttons is “radio group.”
The accessibility label for an individual radio button is typically the same as its adjacent text label.
On this page