---
alias: "fc.attribute.retailerId"
aliases:
  - fc.attribute.retailerId
category: field
module: Core
---
# fc.attribute.retailerId

Retailer ID dropdown selector for assigning a primary retailer to a user. Conditionally shows/hides based on user type (required for RETAILER, optional otherwise). Adapts display between radio buttons (1-3 options) and a scrollable list (4+ options).

## When to Use
- Create/edit user drawers where a retailer must be assigned
- RETAILER user type forms requiring a mandatory retailer selection
- Any form where retailer selection is conditional on context

## Key Props
| Prop | Type | Required | What it controls |
|------|------|----------|------------------|
| `name` | string | Yes | Field name in the form |
| `label` | string | No | Field label (supports i18n keys) |
| `value` | string | No | Pre-selected retailer ID |
| `mandatory` | boolean | No | Whether the field is required |

## Data Binding
The component queries available retailers and renders them as radio buttons (1-3 retailers) or a scrollable list (4+ retailers). When the "+ ADD RETAILER" button is not pressed, no validation is applied. Once expanded, the field validates that a non-empty value is submitted.

## Descendants
No.

## Gotchas
- Two display modes: radio group for 1-3 retailers, scrollable list for 4+ retailers.
- The component has two states: collapsed (no validation) and expanded (required validation). This allows retailer to be optional for non-RETAILER user types.
- Retailer ID is mandatory from the backend perspective, but this component conditionally avoids system validation.
- Designed specifically for the Create User drawer workflow.

## Manifest Example
```json
{
  "component": "fc.attribute.retailerId",
  "props": {
    "name": "primaryRetailerId",
    "label": "i18n:fc.user.primaryRetailer"
  }
}
```

## AI Parse Notes
- **Primary intent:** Declarative Mystique component definition for manifests.
- **Selection signals:** Match by `alias`, category, and required `Key Props`.
- **Assembly hints:** Combine with compatible parent/child components listed in `Composition Patterns`.
- **Safety checks:** Validate required props and data bindings before manifest generation.
