Product Detail

Variant Selector Configurator

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

Overview

VariantSelectorConfigurator is the wizard-style picker for products with many configurable attributes (furniture, custom hardware, configurable bundles). Each attribute lives in its own accordion section, and renders either an options list or a swatch list depending on the attribute type. Reach for this component when a flat VariantSelectorOptions row would overwhelm the shopper, or when a sheet handoff via VariantSelectorMultiple is too coarse.

The required prop is options: selectionButton[] (each entry models one attribute and its values). The component emits update:modelValue with a { optionId, option } payload whenever the shopper picks a value, so the parent always knows which attribute changed and to what.

Auto-import tag: <LVariantSelectorConfigurator>.

Key Business & UX Benefits

Wizard-style accordion guides shoppers through high-consideration purchases (furniture, configurable bundles) one decision at a time, lowering the bail-out rate that flat selectors cause.
Per-attribute control type (options list or swatch list) matches each step to the right input pattern, so shoppers don't fight the UI on color vs. size choices.
Configurable bundles ship with a single component, removing the need for per-category custom configurators that are expensive to build and maintain.
Progressive disclosure keeps the buy-box compact until the shopper engages, which protects PDP scanability for the majority who don't customize.

Usage

VariantSelectorConfigurator Default

<VariantSelectorConfigurator
  :options="product.configurableOptions"
  @update:model-value="onOptionChange"
/>

Feature List

Each attribute lives in its own accordion section so high-consideration purchases break into one decision at a time
Per-attribute control type renders an options list or a swatch list based on the attribute shape
Single component handles furniture, custom hardware, and configurable bundles without per-category forks
Progressive disclosure keeps the buy-box compact until shoppers engage, protecting PDP scanability
update:modelValue fires with { optionId, option } so the parent always knows which attribute changed and to what
Composable from named primitives (AccordionItem, OptionsList, SwatchList) when teams need custom configurator surfaces

API Reference

Prop	Default	Type
`options`required		`selectionButton[] { id, name, displayIcons, 5 more }`
`displayIcons`	`true`	`boolean`
`displayPrices`	`true`	`boolean`
`firstOptionOpen`	`true`	`boolean`
`id`		`string`
`disabled`	`false`	`boolean`
`required`	`false`	`boolean`
`invalid`	`false`	`boolean`

Event	Type
`update:modelValue`	`(event: "update:modelValue", payload: { optionId: string; option: selectionButtonOption; }): void`

Prop	Default	Type
`id`required		`string`
`name`required		`string`
`selectedOption`required		`selectionButtonOption { id, value, displayName, 5 more }`
`price`		`Money { amount, currency }`
`showIcon`		`boolean`
`showPrice`		`boolean`

Slot	Type
`default`	`any`

Prop	Default	Type
`options`required		`selectionButtonOption[] { id, value, displayName, 5 more }`
`selectedOption`required		`selectionButtonOption { id, value, displayName, 5 more }`
`hasInfo`required		`boolean`
`showIcons`		`boolean`
`showPrices`		`boolean`

Event	Type
`click`	`(event: "click"): void`
`update:selectedOption`	`(event: "update:selectedOption", value: selectionButtonOption): void`

Prop	Default	Type
`options`required		`selectionButtonOption[] { id, value, displayName, 5 more }`
`selectedOption`required		`selectionButtonOption { id, value, displayName, 5 more }`

Event	Type
`update:selectedOption`	`(event: "update:selectedOption", option: selectionButtonOption): void`

Edit this pageorReport an issue

Variant Off Canvas

Off-canvas sheet for multi-attribute variant selection.

Variant Selector (Multiple)

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