--- title: Multi-Select Matrix product: Form Library description: Explore the versatility of multi-select matrix questions with our demo using the SurveyJS Form Library. Learn how to configure and implement multiple rows and columns in a matrix question with multiple responses. View an example for JavaScript to learn more. framework: React source: https://surveyjs.io/form-library/examples/multi-select-matrix-question/reactjs index: https://surveyjs.io/form-library/examples/overview.md --- # Multi-Select Matrix (React) 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. ## Create a Multi-Select Matrix Question 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`](https://surveyjs.io/form-library/documentation/api-reference/page-model#elements) array. Within this object, specify the question's [`title`](https://surveyjs.io/form-library/documentation/api-reference/matrix-table-with-dropdown-list#title) and a unique [`name`](https://surveyjs.io/form-library/documentation/api-reference/matrix-table-with-dropdown-list#name) that identifies the matrix question. Optionally, you can specify a [`description`](https://surveyjs.io/form-library/documentation/api-reference/matrix-table-with-dropdown-list#description) to place under the title. ## Configure Matrix Columns To configure matrix columns, populate the [`columns`](https://surveyjs.io/form-library/documentation/api-reference/matrix-table-with-dropdown-list#columns) array. Each object in it specifies settings of a single column. For each column, define its unique [`name`](https://surveyjs.io/form-library/documentation/api-reference/multi-select-matrix-column-values#name), which will be used to access the column in code, and its [`title`](https://surveyjs.io/form-library/documentation/api-reference/multi-select-matrix-column-values#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`](https://surveyjs.io/form-library/documentation/api-reference/multi-select-matrix-column-values#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`](https://surveyjs.io/form-library/documentation/api-reference/radio-button-question-model#choices) array, similar to the question types upon which they are based. Columns also support conditional logic. Use the [`visibleIf`](https://surveyjs.io/form-library/documentation/api-reference/multi-select-matrix-column-values#visibleIf), [`requiredIf`](https://surveyjs.io/form-library/documentation/api-reference/multi-select-matrix-column-values#requiredIf), [`enableIf`](https://surveyjs.io/form-library/documentation/api-reference/multi-select-matrix-column-values#enableIf), [`setValueIf`](https://surveyjs.io/form-library/documentation/api-reference/multi-select-matrix-column-values#setValueIf), and [`resetValueIf`](https://surveyjs.io/form-library/documentation/api-reference/multi-select-matrix-column-values#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`](https://surveyjs.io/form-library/documentation/api-reference/matrix-table-with-dropdown-list) API Reference section for a full list of matrix column properties. ## Configure Matrix Rows 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: ```js { "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. ## Transpose Columns to Rows 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`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-matrix-table-question-model#transposeData) property to `true`, as shown in this demo. ## Files ### `public/index.html` ```html
``` ### `src/SurveyComponent.jsx` ```js import React from "react"; import { Model } from "survey-core"; import { Survey } from "survey-react-ui"; import "survey-core/survey-core.min.css"; import "./index.css"; import { json } from "./json"; function SurveyComponent() { const survey = new Model(json); survey.onComplete.add((sender, options) => { console.log(JSON.stringify(sender.data, null, 3)); }); return (); } export default SurveyComponent; ``` ### `src/index.css` ```css /* You can add your custom CSS here. */ ``` ### `src/index.js` ```js import React from "react"; import { createRoot } from "react-dom/client"; import SurveyComponent from "./SurveyComponent"; const root = createRoot(document.getElementById("surveyElement")); root.render(); ``` ### `src/json.js` ```js export const json = { "elements": [ { "type": "matrixdropdown", "name": "framework-ratings", "title": "Please leave your feedback about JavaScript frameworks", "columnMinWidth": "130px", "columns": [ { "name": "usage", "title": "Do you use the framework?", "cellType": "radiogroup", "choices": [ "Yes", "No" ], "defaultValue": "Yes" }, { "name": "experience", "title": "How long have you used it?", "choices": [ { "text": "3-5 years", "value": 4 }, { "text": "1-2 years", "value": 1.5 }, { "text": "Less than a year", "value": 0.5 } ], "enableIf": "{row.usage} = 'Yes'" }, { "name": "strengths", "title": "Which are the framework's main strengths?", "cellType": "checkbox", "choices": [ "Scalability", "Performance", "Complete functionality", "Learning materials", "Strong community" ], "colCount": 1, "enableIf": "{row.usage} = 'Yes'" }, { "name": "free-form-feedback", "title": "Describe what you like and dislike about the framework", "cellType": "comment", "enableIf": "{row.usage} = 'Yes'", "allowResize": false }, { "name": "rating", "title": "Rate your experience with the framework", "cellType": "rating", "rateValues": [ { "text": "Excellent", "value": 5 }, { "text": "Good", "value": 4 }, { "text": "Average", "value": 3 }, { "text": "Fair", "value": 2 }, { "text": "Poor", "value": 1 } ], "displayMode": "dropdown", "enableIf": "{row.usage} = 'Yes'" } ], "rows": [ { "text": "Angular", "value": "angular" }, { "text": "React", "value": "react" }, { "text": "Vue.js", "value": "vue" } ], "transposeData": true } ] }; ``` ### `src/theme.js` ```js export const themeJson = {}; ``` ### `package.json` ```json { "dependencies": { "react": "latest", "react-dom": "latest", "survey-core": "latest", "survey-react-ui": "latest" }, "devDependencies": { "react-scripts": "latest" } } ``` ## Other Frameworks - [Angular](https://surveyjs.io/form-library/examples/multi-select-matrix-question/angular.md) - [Vue 3](https://surveyjs.io/form-library/examples/multi-select-matrix-question/vue3js.md) - [jQuery](https://surveyjs.io/form-library/examples/multi-select-matrix-question/jquery.md) - [Vanilla JS](https://surveyjs.io/form-library/examples/multi-select-matrix-question/vanillajs.md)