Released: July 30, 2025

SurveyJS v2.3.0 introduces three new features: comment fields for individual choice options, a checkbox-based matrix question, and radar chart support in the Dashboard.

In the SurveyJS Form Library, most question types allow users to leave a comment that explains their answers. Starting with SurveyJS v2.3.0, single- and multi-select question types, such as Checkboxes, Radio Button Group, and Dropdown, support multiple comment fields, enabling users to leave a comment for each individual choice option.

To display a comment field for a specific choice, enable its showCommentArea property. You can also set the isCommentRequired property to make the comment mandatory when that option is selected.

{
  "elements": [
    {
      "type": "checkbox",
      "name": "car",
      "title": "Which is the brand of your car?",
      "choices": [
        { 
          "value": "Ford",
          "showCommentArea": true,
          "isCommentRequired": true
        },
        { "value": "Vauxhall", "showCommentArea": true },
        { "value": "Volkswagen", "showCommentArea": true },
        { "value": "Nissan", "showCommentArea": true }
      ]
    }
  ]
}

To guide users on what to write in the comment field, use the commentPlaceholder property. You can define it on an individual choice item or at the question level to apply the same placeholder across all choices.

{
  "elements": [
    {
      "type": "checkbox",
      "name": "car",
      "title": "Which is the brand of your car?",
      "choices": [
        { 
          "value": "Ford",
          "showCommentArea": true,
          "isCommentRequired": true,
          "commentPlaceholder": "What do you particularly like or dislike about Ford?"
        },
        { "value": "Vauxhall", "showCommentArea": true },
        { "value": "Volkswagen", "showCommentArea": true },
        { "value": "Nissan", "showCommentArea": true }
      ],
      "commentPlaceholder": "Please specify the car's model and share your impressions."
    }
  ]
}

View Demo

To support individual choice comments, the type of the choices property in Checkboxes, Radio Button Group, and Dropdown questions has been changed from itemvalue[] to choiceitem[]. If you previously checked a question's type using the getType() method, you should now use the isDescendantOf() method instead:

// Before SurveyJS v2.3.0:
if (question.getType() === "itemvalue") {
  // ...  
}

// Starting with SurveyJS v2.3.0:
if (obj.isDescendantOf("itemvalue")) {
  //...
}

Starting with SurveyJS v2.3.0, you can add a matrix question with a checkbox in each cell. Unlike a traditional radio-button matrix, this new matrix type allows respondents to select multiple options per row.

To create a matrix with checkboxes, configure a radio-button matrix and set its cellType property to "checkbox":

{
  "elements": [
    {
      "type": "matrix",
      "name": "device-usage",
      "cellType": "checkbox", // Use checkboxes instead of radio buttons
      "title": "Which devices do you use for each of the following activities?",
      "columns": [
        { "value": "phone", "text": "Phone" },
        { "value": "tablet", "text": "Tablet" },
        { "value": "laptop", "text": "Laptop" },
        { "value": "smart-tv", "text": "Smart TV" }
      ],
      "rows": [
        { "value": "videos", "text": "Watching videos" },
        { "value": "news", "text": "Reading news" },
        { "value": "calls", "text": "Video calls" },
        { "value": "shopping", "text": "Online shopping" }
      ]
    }
  ]
}

View Demo

A radar chart (also called "spider chart", "web chart", or "polar chart") visualizes multivariate data in a two-dimensional format, where multiple axes radiate from a common center. Each axis represents a different variable, and values are plotted along these axes and connected to form a polygon. Radar charts offer a quick and intuitive way to compare values across different variables, making it easy to identify strengths and weaknesses at a glance.

Radar charts are automatically supported by Ranking questions. To display data as a radar chart, Dashboard users can select Radar from the chart type drop-down menu.

View Demo

Build Dynamic Forms in NextJS with SurveyJS Survey Creator

Form Library

• [Accessibility] When multiple required fields are empty, screen readers announce all error messages at once (#10154)
• Text piping doesn't work if the question's name contains only one symbol (#10164)
• Async validation doesn't block the survey flow in question-per-page mode (#10163)
• Dynamic Panel: Binding the panel count to a custom expression property raises runtime errors (#10171)
• [Angular v20] An error is raised when clicking the "Make the question visible if" magic wand action in the Survey Creator's Property Grid (#10174)
• Email validation is not triggered when the value changes (#10173)
• The dateDiff function produces a wrong interval in minutes (#10177s)

Survey Creator

• Property Grid: A custom multi-select dropdown property doesn't apply styles from the Survey Creator UI theme (#7017)
• Condition Editor displays incorrect choices when questions share values using the valueName property (#6945)
• The onQuestionAdded event is raised when dragging an existing question or panel to a new page (#7051)
• Editing a new page's title produces an unwanted extra page in page-by-page edit mode (#7053)

Dashboard

• The unregisterVisualizer() method stopped working (#582)
• An exception is thrown on an attempt to visualize Multi-Select Matrix data (#580)

npm i survey-core@v2.3.0 survey-angular-ui@v2.3.0 --save
npm i survey-creator-core@v2.3.0 survey-creator-angular@v2.3.0 --save
npm i survey-analytics@v2.3.0 --save
npm i survey-pdf@v2.3.0 --save

npm i survey-core@v2.3.0 survey-react-ui@v2.3.0 --save
npm i survey-creator-core@v2.3.0 survey-creator-react@v2.3.0 --save
npm i survey-analytics@v2.3.0 --save
npm i survey-pdf@v2.3.0 --save

npm i survey-core@v2.3.0 survey-vue3-ui@v2.3.0 --save
npm i survey-creator-core@v2.3.0 survey-creator-vue@2.3.0 --save
npm i survey-analytics@2.3.0 --save
npm i survey-pdf@2.3.0 --save

<link href="https://unpkg.com/survey-core@2.3.0/survey-core.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/survey-core@2.3.0/survey.core.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/survey-js-ui@2.3.0/survey-js-ui.min.js"></script>

<script src="https://unpkg.com/survey-core@2.3.0/themes/index.min.js"></script>
<script src="https://unpkg.com/survey-creator-core@2.3.0/themes/index.min.js"></script>

<link href="https://unpkg.com/survey-creator-core@2.3.0/survey-creator-core.min.css" type="text/css" rel="stylesheet">
<script src="https://unpkg.com/survey-creator-core@2.3.0/survey-creator-core.min.js"></script>
<script src="https://unpkg.com/survey-creator-js@2.3.0/survey-creator-js.min.js"></script>

<link href="https://unpkg.com/survey-analytics@2.3.0/survey.analytics.min.css" rel="stylesheet">
<script src="https://unpkg.com/survey-analytics@2.3.0/survey.analytics.min.js"></script>

<script src="https://unpkg.com/survey-pdf@2.3.0/survey.pdf.min.js"></script>
<script src="https://unpkg.com/survey-pdf@2.3.0/pdf-form-filler.min.js"></script>