SkuSelector

Displays all the available variants for a given product. The SkuSelector component is mainly used in Product Details Pages (PDPs).

Source code

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

Color: Black

Size: 40

Color: Blue

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

Color: Black

Label

Example

Code

Size: 40

Color

Example

Code

Color: Blue

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-selector

data-fs-sku-selector-variant= "image" | "label" | "color"

data-fs-sku-selector-title

data-fs-sku-selector-list

data-fs-sku-selector-disabled="true"

data-fs-sku-selector-checked="true"

data-fs-sku-selector-option

data-fs-sku-selector-option-image

data-fs-sku-selector-option-color

Props

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
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.