RatingField
The
RatingField component allows users to submit ratings when submitting product reviews. It wraps the Rating component, which displays the rating system, and the associated Label component, which provides a text description for the rating field.Example
Code
Usage
Import the component
_10import { RatingField } from "@faststore/ui";
Import styles
To apply styles, include the following in your stylesheet:
_10@import "@faststore/ui/src/components/molecules/RatingField/styles.scss";
For details, see Importing FastStore UI component styles.
Examples
Variants
Error
Example
Code
Design tokens
Design tokens: Label
| Local token | Default value/Global token linked |
|---|---|
--fs-rating-field-label-color | var(--fs-color-text-light) |
--fs-rating-field-label-size | var(--fs-text-size-2) |
--fs-rating-field-label-line-height | var(--fs-text-size-4) |
Design tokens: Error
| Local token | Default value/Global token linked |
|---|---|
--fs-rating-field-error-message-size | var(--fs-text-size-legend) |
--fs-rating-field-error-message-line-height | 1.1 |
--fs-rating-field-error-message-color | var(--fs-color-danger-text) |
Data attributes
You can target and override
RatingField styles using the following data attributes:data-fs-rating-fielddata-fs-rating-field-labeldata-fs-rating-field-error-messageProps
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-rating-field |
| id | string | ID to identify input and corresponding label. | |
| label* | string | The text displayed to identify the input rating. | |
| error | string | The error message displayed when an error occurs. | |
| ratingRef | MutableRefObject<HTMLUListElement> | Component's ref. | |
| length | number | The length of child elements. | 5 |
| value | number | The current value of the rating, based on the quantity of child elements. | 0 |
| icon | string | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Icon to represent the rating score unit (e.g.: a <Icon name="Star" /> component) | |
| onChange | (value: number) => void | Function to be triggered when Rating option change. This should only be used if you and an actionable rating list. | |
| disabled | false | true | Specifies that the actionable rating should be disabled. |