---
alias: "fc.conditional"
aliases:
  - fc.conditional
category: layout
module: Core
---
# fc.conditional

Show/hide content based on data value matching using template expressions.

## When to Use
- Different content for HD vs CC orders
- Status-specific warnings or alerts
- Role-based content visibility
- Show/hide sections based on entity attributes

## Key Props
| Prop | Type | Required | What it controls |
|------|------|----------|------------------|
| `value` | string | **Yes** | Template string to evaluate, e.g., `"{{status}}"`, `"{{type}}"` |
| `matches` | string / string[] | **Yes** | Value(s) to match against. Array = OR logic for most operations |
| `operation` | string | No | Comparison operator (default: `"="`). Supported: `"="`, `"!="`, `">"`, `"<"`, `">="`, `"<="`, `"contains"` |

## Data Binding
Evaluates `value` template against current data context.

## Descendants
Yes — rendered only when condition matches.

## Composition Patterns
- Multiple `fc.conditional` siblings for if/else-if patterns
- Wrap `fc.card.attribute` for type-specific detail cards
- Wrap `fc.list` for type-specific item views

## Gotchas
- Both `value` AND `matches` are required -- omitting either renders nothing
- No `else` construct -- use a second `fc.conditional` with opposite match
- Template string must be valid Handlebars: `{{fieldName}}`
- Default `operation` is `"="` (strict string equality) -- omitting it means equality check
- **`contains` operates on comma-separated strings**, not JavaScript arrays. The `value` template result is split by `,` into a list, and the condition is true only if ALL `matches` entries are found in that list. Example: `value: "{{tags}}"` where tags = `"urgent,priority"`, `matches: ["urgent"]` = true
- Numeric comparisons (`>`, `<`, `>=`, `<=`) coerce both sides to numbers via `+` operator -- non-numeric strings will produce NaN and fail

## Validation Rules
P06 (CRITICAL — must have both value and matches)

## Manifest Example
```json
{
  "component": "fc.conditional",
  "props": { "value": "{{type}}", "matches": "HD" },
  "descendants": [
    { "component": "fc.card.attribute", "props": { "title": "HD Details", "attributes": [] } }
  ]
}
```

## 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.
