---
title: React Select as a Drop-Down Editor
product: Survey Creator
description: As of V2 of the SurveyJS Creator library, you can edit the layout and functionality of our built-in single-select and multi-select dropdown question using the React Select library.
framework: React
source: https://surveyjs.io/survey-creator/examples/how-to-use-react-select-control-as-dropdown-box-editor/reactjs
index: https://surveyjs.io/survey-creator/examples/overview.md
---

# React Select as a Drop-Down Editor (React)

## Files

### `public/index.html`

```html
<!-- Uncomment the following lines to enable Ace Editor in the JSON Editor tab -->
<!-- 
<script src="https://unpkg.com/ace-builds/src-min-noconflict/ace.js"></script>
<script src="https://unpkg.com/ace-builds/src-min-noconflict/ext-searchbox.js"></script>
<script src="https://unpkg.com/ace-builds/src-min-noconflict/theme-clouds_midnight.js"></script>
-->

<div id="surveyCreatorContainer" style="position: absolute; height: 100%; width: 100%"></div>
```

### `src/SurveyCreatorComponent.jsx`

```js
import React from "react";
import { SurveyCreator, SurveyCreatorComponent } from "survey-creator-react";
import "survey-core/survey.i18n";
import "survey-creator-core/survey-creator-core.i18n";
import Select from "react-select";
import { Serializer, RendererFactory } from "survey-core";
import { SurveyQuestionDropdown, ReactQuestionFactory } from "survey-react-ui";
import "survey-core/survey-core.css";
import "survey-creator-core/survey-creator-core.css";
import "./index.css";

import SurveyTheme from "survey-core/themes";
import { registerCreatorTheme } from "survey-creator-core";

registerCreatorTheme(SurveyTheme); // Add predefined Survey Creator UI themes

// Set up a custom component that will render React Select
class CustomSelect extends SurveyQuestionDropdown {
    constructor(props) {
        super(props);
    }
    // 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() {
        return this.options.filter((o) => o.value == this.question.value);
    }
    // Set the question value to the selected option value
    onSelectChange = (selectedOption) => {
        this.setValueCore(selectedOption.value);
    }
    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>);
        };

        // Otherwise, render the React Select component
        return (
            <Select id={this.question.inputId}
                value={this.selectedOption}
                onChange={this.onSelectChange}
                options={this.options}
                required={this.question.isRequired}
                menuPortalTarget={document.querySelector('body')} />
        );
    }
}

// Register the CustomSelect component as a renderer under a custom name "sv-dropdown-react"
ReactQuestionFactory.Instance.registerQuestion(
    "sv-dropdown-react",
    (props) => {
        return React.createElement(CustomSelect, props);
    }
);

// Register "sv-dropdown-react" as a renderer for questions whose `type` is "dropdown" and `renderAs` property is "dropdown-react"
RendererFactory.Instance.registerRenderer(
    "dropdown",
    "dropdown-react",
    "sv-dropdown-react"
);

// Set "dropdown-react" as a default value for the `renderAs` property of all "dropdown" questions
Serializer.findProperty("dropdown", "renderAs").defaultValue = "dropdown-react";
function SurveyCreatorRenderComponent() {
    const creator = new SurveyCreator();
    creator.JSON = {
        "elements": [
            {
                "type": "dropdown",
                "name": "car",
                "title": "Which is the brand of your car?",
                "showNoneItem": true,
                "choices": [
                    "Ford",
                    "Vauxhall",
                    "Volkswagen",
                    "Nissan",
                    "Audi",
                    "Mercedes-Benz",
                    "BMW",
                    "Peugeot",
                    "Toyota",
                    "Citroen"
                ]
            }
        ]
    };
    return (<SurveyCreatorComponent creator={creator} />);
}

export default SurveyCreatorRenderComponent;
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/index.js`

```js
import React from "react";
import { createRoot } from "react-dom/client";
import SurveyCreatorRenderComponent from "./SurveyCreatorComponent";

const root = createRoot(document.getElementById("surveyCreatorContainer"));
root.render(<SurveyCreatorRenderComponent />);
```

### `package.json`

```json
{
  "dependencies": {
    "react": "latest",
    "react-dom": "latest",
    "babel": "latest",
    "react-select": "5.2.1",
    "survey-core": "latest",
    "survey-react-ui": "latest",
    "survey-creator-core": "latest",
    "survey-creator-react": "latest"
  },
  "devDependencies": {
    "react-scripts": "latest"
  }
}
```

## Other Frameworks