Multi-Select Dropdown / Tag Box
Survey.StylesManager.applyTheme("defaultV2");
var json = {
"elements": [
{
"type": "tagbox",
"isRequired": true,
"choicesByUrl": {
"url": "https://surveyjs.io/api/CountriesExample"
},
"name": "countries",
"title": "Which countries have you visited within the last three years?",
"description": "Please select all that apply."
}
],
"showQuestionNumbers": false
};
window.survey = new Survey.Model(json);
survey.onComplete.add(function(sender) {
document.querySelector('#surveyResult').textContent =
"Result JSON:\n" + JSON.stringify(sender.data, null, 3);
});
ReactDOM.render(
<SurveyReact.Survey model={survey} />, document.getElementById("surveyElement"));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multi-select Tag Box | Open-source Form Builder Libraries</title>
<meta name="viewport" content="width=device-width" />
<script src="https://unpkg.com/react@17.0.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.2.5/babel.min.js"></script>
<script src="/DevBuilds/survey-core/survey.core.min.js"></script>
<script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
<script src="/DevBuilds/survey-react-ui/survey-react-ui.min.js"></script>
<link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="./index.css">
</head>
<body style="margin: 0">
<div id="surveyElement" style="display:inline-block;width:100%;">
</div>
<div id="surveyResult"></div>
<script type="text/babel" src="./index.js"></script>
</body>
</html>Tag Box questions allow respondents to select multiple values from a drop-down list. Selected items are displayed in the input field as removable tags. This example shows how to add a multiple-selection dropdown with a search option to your survey.
Create a Tag Box Question
To create a Tag Box question, define an object with the type property set to "tagbox" and add it to the elements array. Use the choices array to specify drop-down list items. This array can contain either of the following:
String values
"choices": [ "Option 1", "Option 2", "Option 3" ]Objects with the
text(display value) andvalue(value to be saved in survey results) properties"choices": [{ "text": "Option 1", "value": 1 }, { "text": "Option 2", "value": 2 }, { "text": "Option 3", "value": 3 }]
If you want to load choice values from a RESTful service as shown in this example, use the choicesByUrl property instead. It accepts an object that configures access to the web service. This demo specifies only the service's URL. Refer to the ChoicesRestful object for more information on how to configure the choicesByUrl property.
Configure Search
Respondents can search in the drop-down list to find the item they are looking for. Enter a text string right into the input field to try this functionality. If you want to disable search, assign false to the searchEnabled property.
Hide Selected Items
Selected items are added to the input field as tags. However, they also remain highlighted in the drop-down list. If you want selected items to be removed from the list, enable the hideSelectedItems property. This example demonstrates the default behavior.
Implement a Custom Item Template
If you want to customize drop-down list items, create and apply a custom item template. Since Tag Box shares this functionality with the Dropdown question, refer to the following Dropdown demo for detailed instructions: Dropdown with Custom Item Template.