Matrix
A grid of radio buttons or dropdowns for rating multiple items on the same scale.
Overview
The Matrix field renders a two-dimensional grid where rows represent items to be evaluated and columns represent the rating scale options. Each row produces one selection. This is the standard format for Likert scale surveys (e.g. "Rate each aspect: Strongly Disagree → Strongly Agree").
The stored value is an object mapping each row key to the selected column value.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| type | string | — | The field type identifier (e.g. "text", "email"). |
| label | string | — | Human-readable label shown above the field. |
| name | string | — | Unique machine name used as the data key in submissions. |
| required | boolean | false | When true the form cannot be submitted without a value. |
| placeholder | string | undefined | Ghost text shown inside the input when empty. |
| defaultValue | any | undefined | Pre-filled value when the form loads. |
| hidden | boolean | false | Hides the field from the rendered form (still submitted). |
| disabled | boolean | false | Renders the field as read-only and non-interactive. |
| description | string | undefined | Helper text displayed below the field label. |
| className | string | undefined | Additional CSS class applied to the field wrapper. |
| rows | MatrixRow[] | [] | Array of { label, name } objects for each row item. |
| columns | MatrixCol[] | [] | Array of { label, value } objects for the scale options. |
| requireAll | boolean | false | Require all rows to be answered before submission. |
JSON Schema
{
"type": "matrix",
"label": "Service Evaluation",
"name": "service_eval",
"required": true,
"requireAll": true,
"rows": [
{ "label": "Speed of service", "name": "speed" },
{ "label": "Staff friendliness", "name": "staff" },
{ "label": "Value for money", "name": "value" },
{ "label": "Overall satisfaction", "name": "overall" }
],
"columns": [
{ "label": "Poor", "value": "1" },
{ "label": "Fair", "value": "2" },
{ "label": "Good", "value": "3" },
{ "label": "Very Good", "value": "4" },
{ "label": "Excellent", "value": "5" }
]
}