---
title: Dropdown
product: Form Library
description: Add a dropdown menu to your JavaScript app to make it easier for respondents to find and select an answer. It ships with a search-as-you-type feature, server-side filtering, and allows item customization with HTML templates.
framework: React
source: https://surveyjs.io/form-library/examples/create-dropdown-menu-in-javascript/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Dropdown (React)

A drop-down menu allows respondents to select a single answer from a list of choices. You can use drop-down menus for questions that have multiple options but accept only one answer. This example demonstrates how to create and configure a drop-down question in SurveyJS Form Library. Switch between Angular, React, jQuery, Vue, and Vanilla JS to view a demo version for your JavaScript framework/library.

## Create a Drop-Down Menu Question

To create a drop-down menu form field, define an object with the `type` property set to `"dropdown"` and add it to the [`elements`](https://surveyjs.io/form-library/documentation/api-reference/pagemodel#elements) array. Use the [`choices`](https://surveyjs.io/form-library/documentation/api-reference/dropdown-menu-model#choices) array to specify choice values. Each object in this array should have the following structure:

```js
{
  "value": any, // A unique value to be saved in the survey results.
  "text": string // A display text. When `text` is undefined, `value` is used as display text.
}
```

If you need to specify only the `value` property, you can set the `choices` property to an array of primitive values as shown in this demo. These values are both saved in survey results and used as display text.

You can also load choice values from a RESTful web service. In this case, use the `choicesByUrl` property instead of the `choices` array. Refer to following demo for more information: [Load Data from Web Services](https://surveyjs.io/form-library/examples/dropdown-menu-load-data-from-restful-service/).

## Sort Menu Items

Choices are sorted according to the `choices` array. If you want to sort them in ascending or descending alphabetical order, assign `"asc"` or `"desc"` to the [`choicesOrder`](https://surveyjs.io/form-library/documentation/api-reference/dropdown-menu-model#choicesOrder) property. Alternatively, you can set this property to `"random"` to sort choices in random order each time your survey is displayed. You can change the sort order at runtime in this demo.

## Filter Menu Items

Respondents can search the drop-down list for a required item. To do this, enter a filter string into the input field. If you want to disable this functionality, set the [`searchEnabled`](https://surveyjs.io/form-library/documentation/api-reference/dropdown-menu-model#searchEnabled) property to `false`.

## Display Special Choices

Special choices are the "None" and "Other" options. "None" is used when none of the proposed options suit a respondent; "Other" allows respondents to enter their own option into a comment area.

To display the None and Other options, enable the [`showNoneItem`](https://surveyjs.io/form-library/documentation/api-reference/dropdown-menu-model#showNoneItem) and [`showOtherItem`](https://surveyjs.io/form-library/documentation/api-reference/dropdown-menu-model#showOtherItem) properties. You can also set the [`noneText`](https://surveyjs.io/form-library/documentation/api-reference/dropdown-menu-model#noneText) and [`otherText`](https://surveyjs.io/form-library/documentation/api-reference/dropdown-menu-model#otherText) properties to change the captions of the special choices. In this demo, you can show and hide the "Other" option and change its caption at runtime.

When respondents select "Other", the value they enter into the comment area is saved in a separate property. The property name is composed of the question [`name`](https://surveyjs.io/form-library/documentation/api-reference/dropdown-menu-model#name) and [`commentSuffix`](https://surveyjs.io/form-library/documentation/api-reference/surveymodel#commentSuffix). For example, if the question name is `"car"`, the survey result will be as follows:

```js
{
  "car": "other",
  "car-Comment": "Custom value"
}
```

If you want to use the question name as a key to store the comment value, disable the [`storeOthersAsComment`](https://surveyjs.io/form-library/documentation/api-reference/surveymodel#storeOthersAsComment) property in `SurveyModel`. In this case, you will get the following survey result:  

```js
{
  "car": "Custom value"
}
```

## See Also

[Conditionally Display Choice Options](/form-library/examples/how-to-conditionally-display-choice-options/ (linkStyle))

## 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));
    });
    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": "car",
      "title": "Which is the brand of your car?",
      "isRequired": true,
      "showNoneItem": true,
      "showOtherItem": true,
      "choices": [ "Ford", "Vauxhall", "Volkswagen", "Nissan", "Audi", "Mercedes-Benz", "BMW", "Peugeot", "Toyota", "Citroen" ]
    }
  ]
};
```

### `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/create-dropdown-menu-in-javascript/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/create-dropdown-menu-in-javascript/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/create-dropdown-menu-in-javascript/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/create-dropdown-menu-in-javascript/vanillajs.md)