---
title: Context Actions in Element Titles
product: Form Library
description: Add a button to a question, panel, or page title to provide your respondents with extra details on how to fill out a form or answer certain questions. View this free demo for JavaScript to learn more.
framework: React
source: https://surveyjs.io/form-library/examples/modify-titles-of-survey-elements/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Context Actions in Element Titles (React)

In SurveyJS, the titles of questions, panels, and pages can display buttons that allow your respondents to perform custom actions. For instance, this demo shows how to add a custom action button that changes the visibility of question descriptions. Click the question mark icon to see this functionality in action.

## Add Title Actions

To add title actions to a question, panel, or page, handle one of the following [`SurveyModel`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model) events:

- [`onGetQuestionTitleActions`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onGetQuestionTitleActions)
- [`onGetPanelTitleActions`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onGetPanelTitleActions)
- [`onGetPageTitleActions`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onGetPageTitleActions)

Each event has the `options.actions` parameter that accepts an array of [`IAction`](https://surveyjs.io/form-library/documentation/api-reference/iaction) objects. Within these objects, you can specify an action's unique [`id`](https://surveyjs.io/form-library/documentation/api-reference/iaction#id), button text ([`title`](https://surveyjs.io/form-library/documentation/api-reference/iaction#title)) or icon ([`iconName`](https://surveyjs.io/form-library/documentation/api-reference/iaction#iconName)), a function to execute when users click the button ([`action`](https://surveyjs.io/form-library/documentation/api-reference/iaction#action)), and other properties. This example demonstrates the `onGetQuestionTitleActions` event. The other two events are handled in the same manner.

## 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/icons.js`

```js
export const iconDescriptionShowSvg = '<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 1C5.9 1 1 5.9 1 12C1 18.1 5.9 23 12 23C18.1 23 23 18.1 23 12C23 5.9 18.1 1 12 1ZM12 21C7 21 3 17 3 12C3 7 7 3 12 3C17 3 21 7 21 12C21 17 17 21 12 21ZM13.3 16.8C13.4 17 13.4 17.2 13.4 17.4C13.4 17.8 13.2 18.2 13 18.5C12.7 18.8 12.3 18.9 11.9 18.9C11.5 18.9 11.1 18.7 10.8 18.5C10.5 18.2 10.4 17.8 10.4 17.4C10.4 17 10.6 16.6 10.8 16.3C11.1 16 11.5 15.8 11.9 15.8C12.5 15.9 13 16.2 13.3 16.8ZM16 9.3C16 10.4 15.5 11.2 14.6 11.9C14.4 12.1 14.1 12.2 13.9 12.4L13.3 12.8C13 13 12.9 13.1 12.9 13.1C12.8 13.2 12.8 13.3 12.8 13.4C12.8 13.6 12.7 13.8 12.7 14.1V14.4V14.5C12.6 14.7 12.4 14.9 12.2 15C12 15.1 11.9 15.1 11.8 15.1H11.7C11.6 15.1 11.6 15.1 11.5 15.1C11.3 15 11.1 14.9 11 14.8C10.9 14.6 10.7 14.4 10.7 14.1C10.6 13.8 10.5 13.6 10.5 13.3C10.5 13 10.6 12.7 10.7 12.5C10.8 12.3 11 12.1 11.2 11.9C11.4 11.7 11.6 11.6 11.8 11.5L12.4 11.2C13 10.9 13.2 10.7 13.3 10.6C13.6 10.3 13.7 9.9 13.7 9.5C13.7 9.1 13.6 8.7 13.3 8.5C12.8 8 12.4 7.9 12 7.9C10.9 7.9 10.6 8.4 10.6 8.8C10.4 9.3 10.4 9.4 10.4 9.4V9.6C10.4 9.7 10.4 9.7 10.4 9.8L10.5 10.2L10.2 10.3C9.6 10.6 9.1 10.6 8.7 10.4C8.6 10.3 8.4 10.1 8.3 10C8.1 9.7 8 9.4 8 9C8 8.6 8.1 8.3 8.2 8C8.3 7.7 8.5 7.5 8.7 7.3C8.9 7.1 9.1 6.9 9.4 6.7C9.7 6.6 10 6.4 10.3 6.3C11.5 5.9 12.7 5.9 13.6 6.1C14.1 6.2 14.5 6.4 14.9 6.6C15.6 7.3 16 8.1 16 9.3Z" /></svg>';

export const iconDescriptionHideSvg = '<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M2.3 3.7L3.6 5C2 6.9 1 9.3 1 12C1 18.1 5.9 23 12 23C14.7 23 17.1 22 19 20.4L20.3 21.7L21.7 20.3L3.7 2.3L2.3 3.7ZM12 21C7 21 3 17 3 12C3 9.9 3.7 7.9 5 6.4L10.8 12.2C10.7 12.3 10.6 12.4 10.6 12.5C10.5 12.7 10.4 13 10.4 13.3C10.4 13.6 10.5 13.9 10.6 14.1C10.7 14.3 10.8 14.5 10.9 14.8C11 15 11.2 15.1 11.4 15.1C11.5 15.1 11.5 15.1 11.6 15.1H11.7C11.8 15.1 11.9 15.1 12.1 15C12.4 14.9 12.6 14.7 12.6 14.5V14.4V14.1L17.5 19C16.1 20.3 14.1 21 12 21ZM7.8 4.1L6.3 2.6C8 1.6 9.9 1 12 1C18.1 1 23 5.9 23 12C23 14.1 22.4 16 21.4 17.7L19.9 16.2C20.6 15 21 13.5 21 12C21 7 17 3 12 3C10.5 3 9 3.4 7.8 4.1ZM13.5 9.8C13.5 9.7 13.6 9.6 13.6 9.4C13.6 9 13.5 8.6 13.2 8.4C12.8 8 12.4 7.9 12 7.9C11.9 7.9 11.8 7.9 11.6 7.9L10.1 6.4C10.2 6.4 10.2 6.3 10.3 6.3C11.5 5.9 12.7 5.9 13.6 6.1C14.1 6.2 14.5 6.4 14.9 6.6C15.6 7.3 16 8.1 16 9.3C16 10.1 15.7 10.8 15.2 11.4L13.5 9.8ZM11.8 15.9C12.5 15.9 13 16.2 13.3 16.8C13.4 17 13.4 17.2 13.4 17.4C13.4 17.8 13.2 18.2 13 18.5C12.7 18.8 12.3 18.9 11.9 18.9C11.5 18.9 11.1 18.7 10.8 18.5C10.5 18.2 10.4 17.8 10.4 17.4C10.4 17 10.6 16.6 10.8 16.3C11 16 11.4 15.9 11.8 15.9Z" /></svg>';
```

### `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";
import { SvgRegistry } from "survey-core";
import { iconDescriptionShowSvg, iconDescriptionHideSvg } from "./icons";

// Register custom icons
SvgRegistry.registerIcon("icon-description-show", iconDescriptionShowSvg);
SvgRegistry.registerIcon("icon-description-hide", iconDescriptionHideSvg);
function SurveyComponent() {
    const survey = new Model(json);
    survey.onComplete.add((sender, options) => {
        console.log(JSON.stringify(sender.data, null, 3));
    });
    survey.onGetQuestionTitleActions.add((_, options) => {
        options.actions = [{
            id: "show-description",
            tooltip: "Show description",
            iconName: "icon-description-show",
            action: (action) => {
                const q = options.question;
                q.descriptionLocation = q.descriptionLocation !== "hidden" ? "hidden" : "underTitle";
                action.iconName = q.descriptionLocation !== "hidden" ? "icon-description-hide" : "icon-description-show";
            }
        }];
    });
    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": "checkbox",
      "name": "os",
      "title": "What operating system(s) do you use on your work computer(s)?",
      "description": "Please select all that apply.",
      "descriptionLocation": "hidden",
      "choices": [ "Windows", "Linux", "Macintosh OSX" ],
      "showOtherItem": true,
      "otherText": "Other (specify)"
    },
    {
      "type": "checkbox",
      "name": "languages",
      "title": "What programming language(s) do you use at work?",
      "description": "Please select all that apply but no more than three languages.",
      "descriptionLocation": "hidden",
      "choices": [
        "JavaScript", "Java", "Python", "CSS",
        "PHP", "Ruby", "C++", "C",
        "Shell", "C#", "Objective-C", "R",
        "VimL", "Go", "Perl", "CoffeeScript",
        "TeX", "Swift", "Scala", "Emacs Lisp",
        "Haskell", "Lua", "Clojure", "MATLAB",
        "Arduino", "Makefile", "Groovy", "Puppet",
        "Rust", "PowerShell"
      ],
      "showOtherItem": true,
      "otherText": "Other (specify)",
      "colCount": 4,
      "maxSelectedChoices": 3
    }
  ]
};
```

### `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/modify-titles-of-survey-elements/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/modify-titles-of-survey-elements/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/modify-titles-of-survey-elements/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/modify-titles-of-survey-elements/vanillajs.md)