Matrix

The Matrix component (ui:matrix) renders a decision matrix where users score options against weighted criteria. Weighted totals are computed automatically.

Examples

View Glyph Markdown source

```ui:matrix
title: Framework Evaluation
scale: 5
columns:
  - id: perf
    label: Performance
    weight: 2
  - id: dx
    label: DX
    weight: 1.5
rows:
  - id: react
    label: React
  - id: vue
    label: Vue
```

No totals

Properties

Property	Type	Required	Default	Description
title	string	No	—	Optional heading.
scale	number	No	5	Max score per cell (2–10).
showTotals	boolean	No	true	Show weighted total column.
columns	MatrixColumn[]	Yes	—	Criteria columns.
rows	MatrixRow[]	Yes	—	Options to evaluate.
markdown	boolean	No	false	Enable inline markdown formatting (bold, italic, links, code) in text fields.

Markdown Support

Enable inline markdown formatting in row and column labels:

View Glyph Markdown source

```ui:matrix
title: Framework Evaluation
scale: 5
showTotals: true
columns:
  - id: perf
    label: "**Performance**"
    weight: 2
  - id: dx
    label: "*Developer* Experience"
    weight: 1.5
  - id: eco
    label: "`ecosystem` Size"
    weight: 1
rows:
  - id: react
    label: "[React](https://react.dev)"
  - id: vue
    label: "**Vue.js**"
  - id: svelte
    label: "*Svelte*"
markdown: true
```

Supported formatting: bold, italic, code, links

Learn more about markdown in components →

Interaction events

Event kind: matrix-change

Payload field	Type	Description
rowId	string	Row that changed.
columnId	string	Column that changed.
value	number	New cell value.
allValues	Record<string, Record<string, number>>	Full matrix state.
weightedTotals	Array<{ rowId, rowLabel, total }>	Computed totals.

Accessibility

• Uses role="grid" with <th> headers.
• Cells use <input type="number"> with aria-label="Score for {row} on {column}".