Skip to main content

​
ModifierGroup

Need storefront configuration?

Use the public API origin, merchant slug, and location ID. Storefront components never receive a Crave API key; register each exact browser origin before making requests.
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

​
Import

​
Usage

​
Props

​
ModifierGroup
required
The modifier group object containing name, options, min/max selections, and input type.
​
ModifierSelection[]
required
Currently selected modifiers for this group.
​
(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”)