Cart Licenses Contact Support Online Creator Login/Register
Try
Free
v 1.9.38

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.optionsCaption}
</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": "checkbox",
      "name": "car",
      "title": "What cars have you drived?",
      "isRequired": true,
      "hasNone": 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>
Third-party libraries: React Select MIT
Dismiss

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.

Approximate time to complete: 2 min.

Start the survey