RatingField
1 min read
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. |