---
title: Survey Creator Toolbox Categories
product: Survey Creator
description: Easily group different toolbox elements of SurveyJS Form Builder into categories. View a free demo example for JavaScript to learn more.
framework: jQuery
source: https://surveyjs.io/survey-creator/examples/survey-toolbox-categories/jquery
index: https://surveyjs.io/survey-creator/examples/overview.md
---

# Survey Creator Toolbox Categories (jQuery)

The Toolbox is a UI element that displays available question and panel types. To add a question or panel to your survey, simply click it in the Toolbox or drag and drop the desired survey element onto the design surface. This example shows how to arrange questions and panels in the Toolbox into multiple categories.

Note that the Toolbox displays categories only in full display mode. This mode is enabled automatically when Survey Creator has sufficient width. If you want to use the full mode at all times, set the [`forceCompact`](https://surveyjs.io/Documentation/Survey-Creator?id=questiontoolbox#forceCompact) property to `false`.

## Define Toolbox Categories

To organize toolbox items into categories, use the [`defineCategories(categories, displayMisc)`](https://surveyjs.io/survey-creator/documentation/api-reference/questiontoolbox#defineCategories) method. This method accepts an array of objects as the `categories` parameter. Each object defines a single category and lists items included into it. Unlisted items can be collected in the Misc category if you pass `true` as the `displayMisc` parameter. Optionally, you can override display titles for individual items. Refer to the `defineCategories` method call in the code for an example.

You can also use [localization capabilities](https://surveyjs.io/survey-creator/documentation/survey-localization-translate-surveys-to-different-languages#override-individual-translations) to change the caption of the Misc category. This demo shows how to rename the Misc category to "Other Questions". Note that the code that changes the caption should go before the code that instantiates Survey Creator.

## Display Category Titles

Toolbox categories do not show their titles by default. Instead, the categories are separated one from another by a delimiter. If you want to display category titles, enable Toolbox's [`showCategoryTitles`](https://surveyjs.io/survey-creator/documentation/api-reference/questiontoolbox#showCategoryTitles) property.

## Reorder Categories

Created categories are stored in the [`categories`](https://surveyjs.io/Documentation/Survey-Creator?id=questiontoolbox#categories) array of the Toolbox. You can access and modify this array if you want to reorder categories. For example, the following codes swaps the "Text Input Questions" and "Choice Questions" categories:

```js
import { SurveyCreatorModel } from "survey-creator-core";

function swapItems(arr, index1, index2) {
  const item1 = arr[index1];
  arr[index1] = arr[index2];
  arr[index2] = item1;
}

const creator = new SurveyCreatorModel();

const categories = creator.toolbox.categories;
const choiceCatIndex = categories.findIndex(c => c.name === "choice");
const textCatIndex = categories.findIndex(c => c.name === "text");
swapItems(categories, choiceCatIndex, textCatIndex);
```

## Control Category Behavior

The Toolbox also has the following properties to control the behavior of categories:

- [`allowExpandMultipleCategories`](https://surveyjs.io/Documentation/Survey-Creator?id=questiontoolbox#allowExpandMultipleCategories): `boolean`     
Allows more than one category to be in an expanded state. If this property is `false`, when a user expands a category, other categories collapse. Default value: `false`.

- [`keepAllCategoriesExpanded`](https://surveyjs.io/Documentation/Survey-Creator?id=questiontoolbox#keepAllCategoriesExpanded): `boolean`       
Expands all categories. Users cannot collapse them. This property applies only if the Toolbox [displays category titles](#display-category-titles). Default value: `false`.

Since these two properties are incompatible with each other, this example demonstrates only the `allowExpandMultipleCategories` property.

## 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 { getLocaleStrings } from "survey-creator-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

// Rename the Misc category
const translations = getLocaleStrings("en");
translations.toolboxCategories["misc"] = "Other Questions";
const creator = new SurveyCreator();
creator.toolbox.defineCategories([
  {
    category: "Choice-Based Questions",
    items: [
      "dropdown",
      "checkbox",
      "radiogroup",
      "tagbox",
      "imagepicker"
    ]
  },
  {
    category: "Text Input Questions",
    items: [
      "text",
      // Override the display title
      { name: "comment", title: "Multi-Line Input" },
      "multipletext"
    ]
  },
  {
    category: "Read-Only Elements",
    items: [
      "image",
      "html",
      // Override the display title
      { name: "expression", title: "Expression" }
    ]
  },
  {
    category: "Matrices",
    items: [
      "matrix",
      "matrixdropdown",
      "matrixdynamic"
    ]
  },
  {
    category: "Panels",
    items: [
      "panel",
      "paneldynamic"
    ]
  }
], true)

creator.toolbox.allowExpandMultipleCategories = true;
creator.toolbox.showCategoryTitles = true;
creator.toolbox.forceCompact = false;
creator.render("surveyCreatorContainer");
```

### `package.json`

```json
{
  "dependencies": {
    "jquery": "latest",
    "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/survey-toolbox-categories/angular.md)
- [React](https://surveyjs.io/survey-creator/examples/survey-toolbox-categories/reactjs.md)
- [Vue 3](https://surveyjs.io/survey-creator/examples/survey-toolbox-categories/vue3js.md)
- [Vanilla JS](https://surveyjs.io/survey-creator/examples/survey-toolbox-categories/vanillajs.md)