> ## Documentation Index
> Fetch the complete documentation index at: /docs/llms.txt
> Use this file to discover all available pages before exploring further.

# <ModifierGroup />

> Renders a group of modifier options (radio, checkbox, or counter) for product customization.

# ModifierGroup

<Snippet file="api-key-location.mdx" />

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

Desktop

Mobile

## Import

```tsx theme={null}
import { ModifierGroup } from '@/components/ModifierGroup'
```

## Usage

```tsx theme={null}
<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")


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.