---
alias: "fc.mystique.collapsible.attributes"
aliases:
  - fc.mystique.collapsible.attributes
category: content
module: Core
---

# fc.mystique.collapsible.attributes

Collapsible display for entity attributes with expand/collapse toggle, supporting both comma-separated character mode and line-by-line display modes.

## When to Use
- Displaying a large number of entity attributes in a compact, expandable format
- List row cells where space is limited but attributes need to be accessible
- Any component that shows entity attributes with a "More / Less" toggle pattern

## Key Props
| Prop | Type | Required | What it controls |
|------|------|----------|------------------|
| `collapseOn` | `"characters"` / `"lines"` | No | Display and collapse mode. `"characters"` shows comma-separated truncated by character count; `"lines"` shows one attribute per line truncated by line count. Default behavior is `"characters"` (fallback for no config or misconfiguration). |
| `collapseLimit` | number | Yes | Cutoff value: number of characters (when `collapseOn: "characters"`) or number of lines (when `collapseOn: "lines"`) before truncation |
| `hideKeys` | boolean | No | When `true`, hides attribute names and shows values only. Default: `false` -- shows **Name:** value format with bold keys. |
| `exclude` | string[] | No | Array of attribute names to exclude from the display |

## Data Binding
Requires `dataSource` pointing to an array of attributes or a GraphQL Connection of attributes. The data must be objects with `name` and `value` fields. The component handles both flat arrays and Connection format (with `edges[].node`).

Example: `"dataSource": "node.product.attributes"`

## Descendants
No -- self-contained display component.

## Composition Patterns
- `fc.list` column `type: "component"` > `fc.mystique.collapsible.attributes` for expandable attribute cells
- `fc.card.attribute` alongside `fc.mystique.collapsible.attributes` for mixed detail views
- Inside `fc.tabs.card` for an "Attributes" tab with collapsible display

## Gotchas
- `collapseLimit` is required -- without it, the component cannot determine when to truncate.
- In `"characters"` mode: counts the total character length of the comma-separated string, appends "..." when collapsed, and renders attribute keys as bold HTML (uses `dangerouslySetInnerHTML`).
- In `"lines"` mode: counts the number of attribute rows (one attribute per line), slices the array at the limit.
- The "More" / "Less" toggle only appears when the content exceeds the `collapseLimit`.
- If `collapseOn` is set to an invalid value, an error is logged and the component falls back to character-based truncation.
- The data prop accepts both `Attribute[]` and `Connection<Attribute>` -- it auto-detects Connection format via the `edges` property.
- Different from `fc.mystique.collapsible.text` which collapses a single text string by character count.

## Manifest Example
```json
{
  "component": "fc.mystique.collapsible.attributes",
  "dataSource": "node.product.attributes",
  "props": {
    "collapseOn": "lines",
    "collapseLimit": 3,
    "hideKeys": false,
    "exclude": ["internalId", "systemRef"]
  }
}
```

### Inside a list column
```json
{
  "label": "Attributes",
  "type": "component",
  "options": {
    "component": "fc.mystique.collapsible.attributes",
    "props": {
      "collapseOn": "characters",
      "collapseLimit": 80,
      "hideKeys": true
    },
    "dataSource": "node.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.
