---
title: Country Dropdown Template
product: Survey Creator
description: Easily add a new question type to the toolbox of your form builder with our free demo. Learn how to simplify the process of gathering location information from your respondents. The Country question type ships with predefined properties for easy and fast integration into your JavaScript app.
framework: Vanilla JS
source: https://surveyjs.io/survey-creator/examples/javascript-country-select-dropdown-list-template/vanillajs
index: https://surveyjs.io/survey-creator/examples/overview.md
---

# Country Dropdown Template (Vanilla JS)

The Country dropdown allows respondents to select a country from a predefined drop-down list. The country list can be hard-coded or loaded dynamically from a server, as shown in this example. To implement the Country dropdown in your application, you need to create a specialized question type.

[Create Specialized Question Types](https://surveyjs.io/form-library/documentation/customize-question-types/create-specialized-question-types (linkStyle))

## 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/index.css`

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

### `src/index.js`

```js
import { SurveyCreator } from "survey-creator-js";
import "survey-core/survey.i18n";
import "survey-creator-core/survey-creator-core.i18n";
import { ComponentCollection } from "survey-core";
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

ComponentCollection.Instance.add({
    name: "country", 
    title: {
        "default": "Country",
        "fr": "Pays",
        "de": "Land"
    }, 
    defaultQuestionTitle: {
        "default": "Country",
        "fr": "Pays",
        "de": "Land"
    },
    questionJSON: {
        "type": "dropdown",
        "placeholder": {
            "default": "Select a country...",
            "fr": "Sélectionner un pays...",
            "de": "Land auswählen..."
        },
        "choicesByUrl": {
            "url": "https://surveyjs.io/api/CountriesExample",
        }
    },
    inheritBaseProps: true
});
const creator = new SurveyCreator();

creator.toolbox.defineCategories([{
    category: "Custom Items",
    items: [
        "country"
    ]
}], true);

creator.JSON = {
  elements: [
    {
      type: "country",
      name: "question1"
    }
  ]
};
creator.render("surveyCreatorContainer");
```

### `package.json`

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

## Other Frameworks

- [Angular](https://surveyjs.io/survey-creator/examples/javascript-country-select-dropdown-list-template/angular.md)
- [React](https://surveyjs.io/survey-creator/examples/javascript-country-select-dropdown-list-template/reactjs.md)
- [Vue 3](https://surveyjs.io/survey-creator/examples/javascript-country-select-dropdown-list-template/vue3js.md)
- [jQuery](https://surveyjs.io/survey-creator/examples/javascript-country-select-dropdown-list-template/jquery.md)