SkuSelector
Displays all the available variants for a given product. The `SkuSelector` component is mainly used in Product Details Pages (PDPs).
1 min read
The
SkuSelector component is mainly used in Product Details Pages (PDPs) to display all the available variants for a given product.This is a product related component, we recommend testing it using a product mock.
Example
Code
Usage
Import the component
_10import { SkuSelector } from "@faststore/ui";
Import styles
To apply styles, include the following in your stylesheet:
_10@import "@faststore/ui/src/components/molecules/SkuSelector/styles.scss";
For details, see Importing FastStore UI component styles.
Examples
Example
Code
Label
Color
Example
Code
Design tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-sku-selector-row-gap | var(--fs-spacing-2) |
--fs-sku-selector-column-gap | var(--fs-sku-selector-row-gap) |
--fs-sku-selector-text-size | var(--fs-text-size-1) |
Option
| Local token | Default value/Global token linked |
|---|---|
--fs-sku-selector-option-width | var(--fs-spacing-7) |
--fs-sku-selector-option-height | var(--fs-sku-selector-option-width) |
--fs-sku-selector-option-bkg-color-hover | var(--fs-color-primary-bkg-light) |
--fs-sku-selector-option-transition-timing | var(--fs-transition-timing) |
--fs-sku-selector-option-transition-function | ease |
--fs-sku-selector-option-border-width | var(--fs-border-width-thick) |
--fs-sku-selector-option-border-color | var(--fs-color-neutral-7) |
--fs-sku-selector-option-border-radius | var(--fs-border-radius) |
--fs-sku-selector-option-border-color-hover | var(--fs-border-color-active) |
--fs-sku-selector-option-checked-border-width | var(--fs-sku-selector-option-border-width) |
--fs-sku-selector-option-checked-border-color | var(--fs-sku-selector-option-border-color-hover) |
--fs-sku-selector-option-checked-box-shadow | 0 0 0 var(--fs-border-width-thickest) var(--fs-color-focus-ring-outline) |
--fs-sku-selector-option-checked-bkg-color | var(--fs-sku-selector-option-bkg-color-hover) |
--fs-sku-selector-option-disabled-width | var(--fs-border-width) |
--fs-sku-selector-option-disabled-color | var(--fs-color-disabled-text) |
--fs-sku-selector-option-disabled-border-color | var(--fs-border-color-disabled) |
--fs-sku-selector-option-disabled-bkg-color | var(--fs-sku-selector-option-disabled-border-color) |
Design tokens: Image
| Local token | Default value/Global token linked |
|---|---|
--fs-sku-selector-image-width | var(--fs-spacing-6) |
--fs-sku-selector-image-height | var(--fs-sku-selector-image-width) |
--fs-sku-selector-image-border-radius | var(--fs-border-radius-small) |
Design tokens: Color
| Local token | Default value/Global token linked |
|---|---|
--fs-sku-selector-color-width | var(--fs-sku-selector-image-width) |
--fs-sku-selector-color-height | var(--fs-sku-selector-color-width) |
--fs-sku-selector-color-border-radius | var(--fs-sku-selector-image-border-radius) |
Data attributes
You can target and override
SkuSelector styles using the following data attributes:data-fs-sku-selectordata-fs-sku-selector-variant= "image" | "label" | "color"data-fs-sku-selector-titledata-fs-sku-selector-listdata-fs-sku-selector-disabled="true"data-fs-sku-selector-checked="true"data-fs-sku-selector-optiondata-fs-sku-selector-option-imagedata-fs-sku-selector-option-colorProps
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing-library, and jest). | |
| id | string | ID of the current instance of the component. | |
| availableVariations* | Record<string, SkuOption[]> | SKU options that should be rendered. | |
| skuPropertyName* | string | Name of the SKU property that this selector is relative to. | |
| activeVariations* | Record<string, string> | Currently active variation's value. | |
| variant | "label" | "image" | "color" | Optional variant type, when is not passed the type is inferred based on options properties | |
| linkProps | Partial<LinkProps<LinkElementType>> | Extends all Link Props. | |
| getItemHref | (option: SkuOption) => string | Optional function to determines the href string. | |
| slugsMap* | Record<string, string> | Maps property value combinations to their respective SKU's slug | |
| ImageComponent | FunctionComponent<{ src: string; alt: string; }> | Function that returns a React component that will be used to render images. | ({
src,
alt,
...otherProps
}) => <img src={src} alt={alt} {...otherProps} /> |
SkuOptions
| Name | Type | Description | Default |
|---|---|---|---|
| alt | string | Alternative text description of the image. | |
| src | string | Label to describe the option when selected. This is mandatory if you want to use the `image` variant. | |
| label* | string | Current value for this option. | |
| value* | string | Specifies that this option should be disabled. | |
| disabled | boolean | Specifies that this option should be disabled. | |
| hexColor | string | Hex color code for this option. This is mandatory if you want to use the `color` variant. |