---
title: Nest Content Within Choice Options
product: Form Library
description: Build conditional, cascading follow-up questions within the choice options of the Checkboxes and Radio Button Group questions. A sub-question dynamically appears when a nested choice option gets selected. View our free JavaScript demo to learn more.
framework: React
source: https://surveyjs.io/form-library/examples/nest-follow-up-questions-within-choice-options/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Nest Content Within Choice Options (React)

You can nest follow-up questions or panels inside individual options of the Checkboxes and Radio Button Group questions. This layout is useful when certain answer choices require additional input from the respondent. For example, selecting "Music events" can display a follow-up question asking which genres or venues the respondent prefers. This demo illustrates how to implement such a nested layout.

Each choice item in Checkboxes and Radio Button Group questions supports an `elements` array. You can define questions and panels within this array, and they will appear dynamically when the user selects the corresponding choice.

Nesting is not limited to a single level. Nested Checkboxes or Radio Button Group questions can, in turn, contain their own nested elements. Refer to the survey JSON schema in the Code tab for an implementation example.

## See Also

[View Content Nesting Demo in Survey Creator](/survey-creator/examples/nest-sub-questions-within-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));
    });
    survey.data = {
        "event_preferences": [
            "music"
        ],
        "music_event_type": [
            "festival"
        ],
        "preferred_festival_name": "Battle of the bands",
        "contact_methods": [
            "telegram"
        ],
        "telegram_username": "@example"
    }
    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": "event_preferences",
      "title": "Which types of events are you interested in attending?",
      "choices": [
        {
          "value": "music",
          "text": "Music events",
          "elements": [
            {
              "type": "checkbox",
              "name": "music_event_type",
              "title": "Which type of music event would you like to attend?",
              "isRequired": true,
              "choices": [
                {
                  "value": "concert",
                  "text": "Concert",
                  "elements": [
                    {
                      "type": "text",
                      "name": "preferred_concert_genre",
                      "titleLocation": "hidden",
                      "isRequired": true,
                      "placeholder": "Enter preferred music genre (e.g., Rock, Jazz)"
                    },
                    {
                      "type": "text",
                      "name": "preferred_concert_date",
                      "titleLocation": "hidden",
                      "inputType": "month",
                      "placeholder": "Preferred date"
                    }
                  ]
                },
                {
                  "value": "festival",
                  "text": "Music festival",
                  "elements": [
                    {
                      "type": "text",
                      "name": "preferred_festival_name",
                      "titleLocation": "hidden",
                      "isRequired": true,
                      "placeholder": "Enter festival name or type"
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "value": "sports",
          "text": "Sports events",
          "elements": [
            {
              "type": "checkbox",
              "name": "sports_event_type",
              "title": "Which sports events are you interested in?",
              "isRequired": true,
              "choices": [
                {
                  "value": "match",
                  "text": "Live match",
                  "elements": [
                    {
                      "type": "dropdown",
                      "name": "preferred_sport",
                      "titleLocation": "hidden",
                      "isRequired": true,
                      "choices": [
                        "Football",
                        "Basketball",
                        "Tennis"
                      ],
                      "placeholder": "Select sport"
                    }
                  ]
                },
                {
                  "value": "tournament",
                  "text": "Tournament",
                  "elements": [
                    {
                      "type": "text",
                      "name": "preferred_tournament",
                      "titleLocation": "hidden",
                      "isRequired": true,
                      "placeholder": "Enter preferred tournament (e.g., Wimbledon)"
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "value": "cultural",
          "text": "Cultural events",
          "elements": [
            {
              "type": "checkbox",
              "name": "cultural_event_type",
              "title": "Which cultural event are you interested in?",
              "isRequired": true,
              "choices": [
                {
                  "value": "museum",
                  "text": "Museum exhibition",
                  "elements": [
                    {
                      "type": "text",
                      "name": "preferred_museum_theme",
                      "titleLocation": "hidden",
                      "isRequired": true,
                      "placeholder": "Enter theme or type (e.g., Art, History)"
                    }
                  ]
                },
                {
                  "value": "theater",
                  "text": "Theater performance",
                  "elements": [
                    {
                      "type": "text",
                      "name": "preferred_theater_show",
                      "titleLocation": "hidden",
                      "isRequired": true,
                      "placeholder": "Enter the name of the show"
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "type": "checkbox",
      "name": "contact_methods",
      "title": "How may we contact you?",
      "choices": [
        {
          "value": "email",
          "text": "By email",
          "elements": [
            {
              "type": "text",
              "name": "email_address",
              "titleLocation": "hidden",
              "inputType": "email",
              "placeholder": "Enter your email address"
            }
          ]
        },
        {
          "value": "phone_call",
          "text": "By phone call",
          "elements": [
            {
              "type": "text",
              "name": "phone_number_call",
              "titleLocation": "hidden",
              "isRequired": true,
              "inputType": "tel",
              "placeholder": "Enter your phone number"
            },
            {
              "type": "comment",
              "name": "preferred_call_time",
              "titleLocation": "hidden",
              "placeholder": "Enter a convenient time to call"
            }
          ]
        },
        {
          "value": "sms",
          "text": "By SMS",
          "elements": [
            {
              "type": "text",
              "name": "phone_number_sms",
              "titleLocation": "hidden",
              "valueName": "phone_number_call",
              "inputType": "tel",
              "placeholder": "Enter your phone number"
            }
          ]
        },
        {
          "value": "telegram",
          "text": "By Telegram",
          "elements": [
            {
              "type": "text",
              "name": "telegram_username",
              "titleLocation": "hidden",
              "isRequired": true,
              "placeholder": "Enter your Telegram username"
            }
          ]
        }
      ]
    }
  ]
};
```

### `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/nest-follow-up-questions-within-choice-options/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/nest-follow-up-questions-within-choice-options/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/nest-follow-up-questions-within-choice-options/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/nest-follow-up-questions-within-choice-options/vanillajs.md)