Product Bundle

Option Selectors

Components for selecting single or multiple product options with visual feedback.

Single Option Selector

Radio button selector for mutually exclusive options

Small
Base price
Medium
+$300
Large
+$600

Multi Option Selector

Checkbox selector for multiple options

Handles
Handles
+$150
Dividers
Dividers
+$200
Lock
Lock
+$250

Usage

The Option Selectors provide interactive UI elements for users to select product options. The SingleOptionSelector is used for mutually exclusive choices (like size or color), while the MultiOptionSelector allows users to select multiple options (like accessories or add-ons).

Props

SingleOptionSelector

  • options - Array of option objects with id, name, priceAdjustment, and image
  • selectedOption - ID of the currently selected option
  • onChange - Function called when an option is selected

MultiOptionSelector

  • options - Array of option objects with id, name, priceAdjustment, and image
  • selectedOptions - Array of IDs of the currently selected options
  • onChange - Function called when an option is toggled
← Previous: Product Image CarouselNext: Modification Group →