Skip to main content

​
ModifierGroup

Displays a single modifier group (e.g., “Choose your size”, “Add toppings”) with its options. Supports radio (single-select), checkbox (multi-select), and counter (quantity) input types.

​
Preview

View in Storybook

​
Import

import { ModifierGroup } from '@/components/ModifierGroup'

​
Usage

<ModifierGroup
  group={sizeModifierGroup}
  selections={currentSelections}
  onSelectionChange={handleSelectionChange}
/>

​
Props

​
group
ModifierGroup
required
The modifier group object containing name, options, min/max selections, and input type.
​
selections
ModifierSelection[]
required
Currently selected modifiers for this group.
​
onSelectionChange
(selections: ModifierSelection[]) => void
required
Callback fired when modifier selections change.

​
Behavior

  • Enforces min/max selection constraints with visual feedback
  • Radio groups auto-deselect previous option
  • Counter inputs respect per-option quantity limits
  • Displays price adjustments next to each option (e.g., ”+$1.50”)