Cart Licenses Contact Support Online Creator Log in/Register
v 1.9.44

Survey Toolbox customization


const options = { questionTypes : ["text", "checkbox", "radiogroup", "dropdown"] };            
                var creator = new SurveyCreator.SurveyCreator(options);
                        <SurveyCreator.SurveyCreatorComponent creator={creator} />
//Add all countries question into toolbox
        name: "countries",
        isCopied: true,
        iconName: "icon-default",
        title: "All countries",
        json: { "type": "dropdown",  placeholder: "Select a country...", choicesByUrl: { url: ""   } }

//Change the default choices for "checkbox", "radiogroup" and "dropdown" questions
var newDefaultChoices =  ["My Choice 1", {value: 2, text: "Show text not value"}];

//Change default choices only
creator.toolbox.getItemByName("checkbox").json.choices = newDefaultChoices;
creator.toolbox.getItemByName("radiogroup").json.choices = newDefaultChoices;
creator.toolbox.getItemByName("dropdown").json.choices = newDefaultChoices;
<!DOCTYPE html>
<html lang="en">
    <title>Survey Toolbox customization, Survey Creator Example</title>
<meta name="viewport" content="width=device-width" />
    <script src=""></script>
    <script src=""></script>
    <script src=""></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" />
    <script src="" type="text/javascript" charset="utf-8"></script>
    <script src="" type="text/javascript" charset="utf-8"></script>
    <!-- Uncomment to enable Select2
    <script src=""></script>
    <link href="" rel="stylesheet" />
    <script src=""></script>
        <script src="/DevBuilds/survey-creator-core/survey-creator-core.min.js"></script>
        <link href="/DevBuilds/survey-creator-core/survey-creator-core.min.css" type="text/css" rel="stylesheet" />
        <script src="/DevBuilds/survey-creator-core/survey-creator-core.i18n.min.js"></script>
        <script src="/DevBuilds/survey-creator-react/survey-creator-react.min.js"></script>
            :root {
                --tab-min-height: 600px;
    <link rel="stylesheet" href="./index.css">

<body style="margin: 0">
<div id="surveyContainer">
            <div id="creatorElement" style="height: 100vh;"></div>

<script type="text/babel" src="./index.js"></script>


Question Toolbox API

Limit the default question types

Use questionTypes string array in the creatorOptions parameter of Editor constructor. Only the given question types will appear in the Toolbox
var creatorOptions = {questionTypes : ["text", "checkbox", "radiogroup", "dropdown"]};
var creator = new SurveyCreator.SurveyCreator("creatorElement", creatorOptions);

Question Toolbox functions

From version 0.12.0 a new creator.toolbox property has been introduced. It provides the full control under Question Toolbox.
    Here is the list of available properties and functions:
  • jsonText - The string property. Allows to get and set all toolbox items as a string.
  • copiedJsonText - The string property. Allows to get and set copied questions as a string. End-user may add a queston into toolbox by clicking on 'Add to Toolbox' question menu item.
  • items - Returns the list of current toolbox items. Toolbox item properties are described below.
  • copiedItems - Returns the list of current copied toolbox items. End-user may add a queston into toolbox by clicking on 'Add to Toolbox' question menu item.
  • addItems(items[, clearAll]) - Add the list of toolbox items into toolbox. If an optional parameter clearAll is set to true, all previous items will be removed.
  • addCopiedItem(question - Add a question into Toolbox as a copied item.
  • addItem(item) - Add a new item into toolobx. If the item with the same name already exists, then replace it.
  • replaceItem(item) - Find an existing item by and replace its properties. Return false if the item with the same name doesn't exist.
  • removeItem(name) - Find an existing item by name parameter and remove it.
  • clearItems() - Remove all items from the toolbox.
  • clearCopiedItems() - Remove all copied items from the toolbox.

Question Toolbox Item properties

    name: string;
    iconName: string;
    json: any;
    title: string;
    isCopied: boolean;
  • name - The required attribute. The unique item id. By default it is a question type.
  • iconName - The optional attribute. The icon name. The default value is 'icon-default'. It is 'icon-' + [question_type] for a standard Survey question.
  • json - The required attribute. A question is created based on this json. The json should has at least the 'type' string property. It used to create the correct question. All other properties are optional and you
  • title - The toolbox item title.
  • isCopied - true if the item is created by clicking on 'Add to Toolbox' question menu item.

Tell Us What You Think

Help us serve you better by taking this brief survey.
We are interested to learn more about your
experience of using our libraries.

We'd really appreciate your feedback.

Start the Survey

Approximate time to complete: 2 min.