Product Detail

Variant Selector (Multiple)

Multi-attribute variant selector that opens an off-canvas sheet to pick across several dimensions at once.

Overview

VariantSelectorMultiple is the trigger row for products where shoppers need to pick across more than one dimension at the same time. Tapping it opens VariantOffCanvas with the full variant grid. Control sheet visibility with v-model:open.

The companion siblings VariantSelectorMultipleTrigger and VariantSelectorMultipleAvailability let you build a custom trigger or surface availability separately when the default layout does not fit.

For a flat inline picker (size and color in the same row), use VariantSelectorOptions. For wizard-style products with many configurable attributes, use VariantSelectorConfigurator.

Auto-import tag: <LVariantSelectorMultiple>.

Key Business & UX Benefits

Trigger row keeps the buy-box compact while still signaling "pick your size and color", so the PDP stays scannable for the majority of shoppers.
Sheet handoff to the full variant grid is the cleanest way to handle two-plus dimensions on mobile, where most variant decisions now happen.
Companion trigger and availability components let teams tailor the entry point for category-specific buy-boxes (footwear sizing, electronics specs) without forking the picker.
Availability sits in a VariantSelectorMultipleAvailability row directly beneath the trigger, setting expectations before shoppers open the sheet and cutting the frustration of opening a picker only to see everything sold out.

Usage

VariantSelectorMultiple Default

<VariantSelectorMultiple v-model:open="open" :variants="product.variants" />

Feature List

Trigger row keeps the buy-box compact while still signalling that size and color picks live behind it
v-model:open hands off to VariantOffCanvas so the full variant grid takes over once the shopper taps in
Companion VariantSelectorMultipleTrigger lets teams ship a custom trigger when the default row does not fit
Companion VariantSelectorMultipleAvailability renders directly beneath the trigger, surfacing stock state before the sheet opens
Sheet handoff is the cleanest mobile pattern for products that span two or more attribute dimensions

API Reference

Prop	Default	Type
`variants`required		`VariantSelectorMultipleVariantItem[] { id, selectedOptions, image, 6 more }`
`groupBy`		`string`
`selectedVariant`		`VariantSelectionCardProps { id, selectedOptions, image, 6 more }`
`id`		`string`
`disabled`		`boolean`
`required`		`boolean`
`invalid`		`boolean`
`open`		`boolean`

Slot	Type
`default`	`{ open: any; groupedVariants: any; groupBy: string \| undefined; selectedVariantId: any; onUpdateOpen: (value: boolean) => boolean; onSelected: any; }`

Event	Type
`update:open`	`(event: "update:open", value: boolean): void`
`update:selectedVariant`	`(event: "update:selectedVariant", value: VariantSelectionCardProps \| null \| undefined): void`

Prop	Default	Type
`image`required		`Media`
`options`required		`{ name, value }[]`
`hasVariants`required		`boolean`

Event	Type
`clicked`	`(event: "clicked"): void`

Prop	Default	Type
`options`required		`{ amount, name, singleName }[]`

Edit this pageorReport an issue

Variant Selector Configurator

Wizard-style variant configurator with accordion sections, options lists, and swatch lists.

Variant Selector Options

Multi-attribute variant selector that picks the right option tile per attribute (text tiles for size and material, image grid or slider for color).