React Tagbox


                        
        
            Survey.StylesManager.applyTheme("defaultV2");
        

class CustomSelect extends SurveyReact.SurveyQuestionCheckbox {
  // Convert the `visibleChoices` array to a format supported by React Select
  get options() {
    return this.question.visibleChoices.map((c) => {
      return { value: c.value, label: c.value };
    });
  }
  // Retrieve an option object based on the question value
  get selectedOption() {
    const res = [];
    const opts = this.options;
    let qValue = this.question.value;
    if (!qValue) qValue = [];
    for (var i = 0; i < opts.length; i++) {
      if (qValue.indexOf(opts[i].value) > -1) res.push(opts[i]);
    }
    return res;
  }
  // Set the question value to the selected option value
  onSelectChange = (selectedOption) => {
    const newValue = [];

    for (var i = 0; i < selectedOption.length; i++) {
      newValue.push(selectedOption[i].value);
    }
    this.question.value = newValue;
  };
  renderElement() {
    // If the question is non-editable, render a stylized div
    if (this.isDisplayMode) {
      return (
<div id={this.question.inputId}
     className={this.question.getControlClass()}
     disabled>
    {this.question.displayValue || this.question.placeholder}
</div>
      );
    }
    return (
<Select id={this.question.inputId}
        value={this.selectedOption}
        onChange={this.onSelectChange}
        options={this.options}
        isMulti={true}
        required={this.question.isRequired}
        menuPortalTarget={document.querySelector("body")} />
    );
  }
}
// Register the CustomSelect component as a renderer under a custom name "sv-tagbox-react"
SurveyReact.ReactQuestionFactory.Instance.registerQuestion(
  "sv-tagbox-react",
  (props) => {
    return React.createElement(CustomSelect, props);
  }
);
// Set up a custom component that will render React Select
// Register "sv-tagbox-react" as a renderer for questions whose `type` is "tagbox" and `renderAs` property is "tagbox-react"
Survey.RendererFactory.Instance.registerRenderer(
  "checkbox",
  "tagbox-react",
  "sv-tagbox-react"
);


                
                    var json = {
  "elements": [
    {
      "type": "html",
      "name": "question1",
      "html": "<p>This example is obsolete. SurveyJS Form Library now offers the functionality of React Select out of the box. Please refer to the following example instead: <a href='https://surveyjs.io/form-library/examples/how-to-create-multiselect-tag-box/reactjs'>Multi-Select Dropdown / Tag Box</a>.<p>"
    },
    {
      "type": "checkbox",
      "name": "car",
      "title": "What cars have you drived?",
      "isRequired": true,
      "showNoneItem": true,
      "choices": [
        "Ford",
        "Vauxhall",
        "Volkswagen",
        "Nissan",
        "Audi",
        "Mercedes-Benz",
        "BMW",
        "Peugeot",
        "Toyota",
        "Citroen"
      ],
      "renderAs": "tagbox-react"
    }
  ]
};

                    window.survey = new Survey.Model(json);
                
        
            survey.onComplete.add(function(sender) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
            });
        
survey.data = { car: ['Ford'] };
        
            ReactDOM.render(
            <SurveyReact.Survey model={survey}  />, document.getElementById("surveyElement"));
        

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>React Tagbox, Reactjs Survey Library Example</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">
<script src="https://cdn.jsdelivr.net/npm/emotion@9.2.12/dist/emotion.umd.min.js"></script>
<script src="https://unpkg.com/prop-types@15.5.10/prop-types.min.js"></script>
<script src="https://unpkg.com/react-input-autosize@2.2.1/dist/react-input-autosize.min.js"></script>
<script src="https://unpkg.com/react-select@2.4.4/dist/react-select.min.js"></script>
    <script src="/DevBuilds/surveyjs-widgets/surveyjs-widgets.min.js"></script>

</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>
Loading...
Sorry, we can't retrieve the data from server. Please comeback later.
Third-party libraries: React Select ( MIT-licensed )

Why we use cookies.

This site uses cookies to make your browsing experience more convenient and personal. Cookies store useful information on your computer to help us improve the efficiency and relevance of our site for you. In some cases, they are essential to making the site work properly. By accessing this site, you consent to the use of cookies.

For more information, refer to DevSoft Baltic’ privacy policy and cookie policy.