-
Templates
-
Simple Questions
-
Text Entry
-
Date-Time Entry
-
Numeric Entry
-
Color Input
-
Radio Button Group
-
Dropdown
-
Dropdown: Load Data from Web Services
-
Dropdown with Lazy Loading
-
Multi-Select Dropdown
-
Checkboxes
-
Carry Forward Responses
-
Image Picker
-
Yes/No Question
-
Signature
-
Multiple Textboxes
-
Rating Scale
-
Rating Scale UI Adaptation Modes
-
Ranking
-
Long Text
-
Image
-
HTML
-
File Upload
-
Expression
-
Expression (using async functions)
-
-
Matrix Table Questions
-
Panel & Dynamic Panel
-
Survey
-
Title and Logo
-
Questions in one line
-
Survey Options
-
Auto-Populate Form Fields
-
Merge Question Values
-
Edit saved survey
-
Read-only/display mode
-
Show Preview before complete
-
Pop-Up Survey
-
Context actions in element titles
-
Modify title tags
-
Custom render of survey elements
-
File - custom preview
-
File - delayed upload
-
Lazy questions rendering
-
-
Quizzes and Scored Surveys
-
Customize Rendering
-
Integration with Third-Party Libraries
-
Appearance customization
-
Navigation
-
Conditions and Triggers
-
Conditional Visibility
-
Simplify Cascade Conditions
-
Dynamic Default Question Values
-
Complex Questions in Expressions
-
Custom Functions in Expressions
-
Implement a Custom Expression Property
-
Dynamic Questions with Conditional Logic
-
Hide Question Elements (Rows, Columns, Choices)
-
Show/Hide individual items in radiogroup/checkbox/dropdown
-
Hide Rows and Columns in a Matrix Table
-
Hide Rows and Columns in a Matrix Dropdown Question
-
Conditional Logic to Enable or Disable Questions
-
Complete Trigger
-
CopyValue Trigger
-
SetValue Trigger
-
Run Expression Trigger
-
-
Text Formatting
-
Survey Localization
-
Input Validation
-
SurveyJS Storage
Multi-Select Dropdown
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.
-
Templates
-
Simple Questions
-
Text Entry
-
Date-Time Entry
-
Numeric Entry
-
Color Input
-
Radio Button Group
-
Dropdown
-
Dropdown: Load Data from Web Services
-
Dropdown with Lazy Loading
-
Multi-Select Dropdown
-
Checkboxes
-
Carry Forward Responses
-
Image Picker
-
Yes/No Question
-
Signature
-
Multiple Textboxes
-
Rating Scale
-
Rating Scale UI Adaptation Modes
-
Ranking
-
Long Text
-
Image
-
HTML
-
File Upload
-
Expression
-
Expression (using async functions)
-
-
Matrix Table Questions
-
Panel & Dynamic Panel
-
Survey
-
Title and Logo
-
Questions in one line
-
Survey Options
-
Auto-Populate Form Fields
-
Merge Question Values
-
Edit saved survey
-
Read-only/display mode
-
Show Preview before complete
-
Pop-Up Survey
-
Context actions in element titles
-
Modify title tags
-
Custom render of survey elements
-
File - custom preview
-
File - delayed upload
-
Lazy questions rendering
-
-
Quizzes and Scored Surveys
-
Customize Rendering
-
Integration with Third-Party Libraries
-
Appearance customization
-
Navigation
-
Conditions and Triggers
-
Conditional Visibility
-
Simplify Cascade Conditions
-
Dynamic Default Question Values
-
Complex Questions in Expressions
-
Custom Functions in Expressions
-
Implement a Custom Expression Property
-
Dynamic Questions with Conditional Logic
-
Hide Question Elements (Rows, Columns, Choices)
-
Show/Hide individual items in radiogroup/checkbox/dropdown
-
Hide Rows and Columns in a Matrix Table
-
Hide Rows and Columns in a Matrix Dropdown Question
-
Conditional Logic to Enable or Disable Questions
-
Complete Trigger
-
CopyValue Trigger
-
SetValue Trigger
-
Run Expression Trigger
-
-
Text Formatting
-
Survey Localization
-
Input Validation
-
SurveyJS Storage