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.Overview
Example
Code
Import
Import the component from the @faststore/ui package.
_10import { RatingField } from '@faststore/ui'
Import Styles into your FastStore project
To apply the styles of this component in your FastStore project, import the following into your stylesheet:
_10@import '@faststore/ui/src/components/molecules/RatingField/styles.scss';
For more information, refer to Importing FastStore UI component styles.
Props
| 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. |
Design Tokens
Nested elements
Label
_10 <RatingField label="Rate the product from 1 to 5 stars" id="rating-field-default" />
| 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) |
Variants
Error
_10 <RatingField label="Rate the product from 1 to 5 stars" id="rating-field-error" error="This field is required." />
| 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) |
Customization
For further customization, you can use the following data attributes:
data-fs-rating-fielddata-fs-rating-field-labeldata-fs-rating-field-error-message