---
title: User-Defined Choice Options
product: Form Library
description: Allow users to manually add their own choices in Dropdown and Tag Box questions if the option they're looking for isn't available. View the interactive JavaScript form builder demo to learn more.
framework: React
source: https://surveyjs.io/form-library/examples/dropdown-custom-choice-options/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# User-Defined Choice Options (React)

Respondents can add their own choice options to a Dropdown or Tag Box if the desired option isn't available. Click into the dropdown below and start typing a car brand. If the brand isn't found, a "Create 'X' item" command will appear. You can click it to save the entered text as a new choice. In this demo, custom choices are saved in the `localStorage` and restore on page reload. Click the "Clear saved choices" button to delete the choices from the `localStorage`.

To let users add custom choice options, set the [`allowCustomChoices`](https://surveyjs.io/form-library/documentation/api-reference/dropdown-menu-model#allowCustomChoices) property to `true` for an individual Dropdown or Tag Box question. By default, custom choices are only stored temporarily and will be lost once the browser page is closed. If you'd like to keep these custom choices longer, handle the [`onCreateCustomChoiceItem`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onCreateCustomChoiceItem) event to save them to your own data storage. Within the event handler, you'll have access to both the new item being added and the list of [previously added custom choices](https://surveyjs.io/form-library/documentation/api-reference/dropdown-menu-model#customChoices). You can store the new item, the existing ones, or both. Refer to the Code tab for a code example.

## Files

### `public/index.html`

```html
<div id="surveyElement" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 100%; height:100%"></div>
```

### `src/SurveyComponent.jsx`

```js
import React from "react";
import { Model } from "survey-core";
import { Survey } from "survey-react-ui";
import "survey-core/survey-core.min.css";
import "./index.css";
import { json } from "./json";

function SurveyComponent() {
    const survey = new Model(json);
    survey.onComplete.add((sender, options) => {
        console.log(JSON.stringify(sender.data, null, 3));
    });
    survey.onCreateCustomChoiceItem.add((_, { question, item }) => {
        localStorage.setItem(question.name, JSON.stringify(question.customChoices.concat(item)));
    });
    
    survey.addNavigationItem({
        id: "clear-custom-choices",
        title: "Clear saved choices",
        action: () => clearCustomChoices(survey)
    });
    
    restoreCustomChoices(survey);
    
    function getQuestionsWithCustomChoices(survey) {
        const allQuestions = survey.getAllQuestions();
        return allQuestions.filter(q => q.allowCustomChoices);
    }
    
    function restoreCustomChoices(survey) {
        const questionsWithCustomChoices = getQuestionsWithCustomChoices(survey);
        questionsWithCustomChoices.forEach(q => {
            const customChoices = JSON.parse(localStorage.getItem(q.name));
            if (customChoices)
                q.customChoices = customChoices;
        });
    }
    
    function clearCustomChoices(survey) {
        const questionsWithCustomChoices = getQuestionsWithCustomChoices(survey);
        let notificationType = "info";
        questionsWithCustomChoices.forEach(q => {
            if (q.customChoices.length > 0) {
                q.customChoices = [];
                localStorage.removeItem(q.name);
                notificationType = "success";
            }
        });
        const notificationMessage = notificationType === "info" ? "No custom choices found" : "Custom choices are deleted successfully";
        survey.notify(notificationMessage, notificationType);
    }
    return (<Survey model={survey} />);
}

export default SurveyComponent;
```

### `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 SurveyComponent from "./SurveyComponent";

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

### `src/json.js`

```js
export const json = {
  "elements": [
    {
      "type": "dropdown",
      "name": "current-car",
      "title": "Which is the brand of your current car?",
      "showNoneItem": true,
      "choices": [ "Ford", "Vauxhall", "Volkswagen", "Nissan", "Audi", "Mercedes-Benz", "BMW", "Peugeot", "Toyota", "Citroen" ],
      "allowCustomChoices": true
    },
    {
      "type": "tagbox",
      "name": "previous-cars",
      "title": "Which car brands have you owned before?",
      "showNoneItem": true,
      "choices": [ "Ford", "Vauxhall", "Volkswagen", "Nissan", "Audi", "Mercedes-Benz", "BMW", "Peugeot", "Toyota", "Citroen" ],
      "allowCustomChoices": true
    }
  ]
};
```

### `src/theme.js`

```js
export const themeJson = {};
```

### `package.json`

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

## Other Frameworks

- [Angular](https://surveyjs.io/form-library/examples/dropdown-custom-choice-options/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/dropdown-custom-choice-options/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/dropdown-custom-choice-options/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/dropdown-custom-choice-options/vanillajs.md)