Multi-Select Matrix

A Multi-Select Matrix, also known as a matrix question with multiple responses, is a type of survey or form question that presents a grid or table structure where respondents can select multiple answers for each row or column combination. This demo shows a Multi-Select Matrix question example and describes how to configure multiple rows and columns selection in a matrix using the SurveyJS Form Library.

To add a Multi-Select Matrix question to your survey, create an object with the type property set to "matrixdropdown" and add the object to the elements array. Within this object, specify the question's title and a unique name that identifies the matrix question. Optionally, you can specify a description to place under the title.

To configure matrix columns, populate the columns array. Each object in it specifies settings of a single column. For each column, define its unique name, which will be used to access the column in code, and its title, which will be visible to respondents.

Column cells can contain editors of different types: single- or multi-line inputs, drop-down menus, checkboxes, etc. Use a column's cellType property to specify the editor type, which is Dropdown by default.

Column editor types are based upon standalone question types. Depending on the selected editor type, the matrix column can have additional configuration properties inherited from the corresponding question type. For instance, Dropdown, Checkboxes, Radio Button Group, and Tag Box columns can specify the choices array, similar to the question types upon which they are based.

Columns also support conditional logic. Use the visibleIf, requiredIf, enableIf, setValueIf, and resetValueIf properties to dynamically show or hide a column, mark it as required, enable or disable its editors, set or reset the value of its cells. In this demo, the enableIf property is used to enable column editors only if a respondent answers "Yes" to the "Do you use the framework?" question.

Refer to the MatrixDropdownColumn API Reference section for a full list of matrix column properties.

To configure matrix rows, populate the rows array. Similar to columns, the rows array contains objects, and each object configures a single row. However, row objects can have only two properties:

{
  "value": any, // A value to be saved in the survey results
  "text": string, // A row title. When `text` is undefined, `value` is used.
}

Refer to the survey.json file listing for a code example.

A Multi-Select Matrix allows you to transpose its content, i.e. display columns as rows, and vice versa. If you find that your matrix would benefit from transposing, set the matrix's transposeData property to true, as shown in this demo.