---
title: Question Auto-Numbering
product: Form Library
description: Discover how question and page numbering enhances survey structure, user progress tracking, and logical sequencing. View this free demo for JavaScript to learn how to manage numbering within your survey, including page-based restart, hiding question numbers, and custom numbering within panels.
framework: React
source: https://surveyjs.io/form-library/examples/how-to-number-pages-and-questions/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Question Auto-Numbering (React)

Question and page numbers provide a clear structure to a survey and help respondents track their progress and identify survey elements. They also ensure logical sequencing and grouping of related questions, making it easier to understand the flow of the survey and navigate through it. This demo shows how to manage numbering within your survey: use sequential or recursive numbering, restart numbering on each page or within individual panels, or hide question numbers altogether. Switch to the Angular, React, Vue, Vanilla JS, or jQuery version of this demo to view code for your framework.

## How to Number Questions

Surveys support the following numbering modes:

- Sequential numbering      
Survey elements are numbered in order, regardless of whether they are nested in panels or not.

- Recursive numbering       
Survey elements are numbered in a manner that takes into account their nesting level (for example, 1 → 1.1 → 1.1.1).

- Sequential numbering with a reset on each page      
Survey elements are numbered in order, but the numbering starts anew on each page.

By default, questions are not numbered. To enable one of the numbering modes, set `SurveyModel`'s [`showQuestionNumbers`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#showQuestionNumbers) property to `true` (sequential numbering), `"recursive"`, or `"onpage"`. In this demo, you can switch between those modes using the **Question numbering** dropdown.

Questions within panels can participate in survey-level numbering or have an individual numbering sequence. Use `PanelModel`'s [`showQuestionNumbers`](https://surveyjs.io/form-library/documentation/api-reference/panel-model#showQuestionNumbers) property to specify the desired numbering mode: `"default"` to continue survey-level numbering, `"recursive"` to number nested questions recursively, `"onpanel"` to start numbering within the panel from scratch, or `"off"` to hide numbers for nested questions. Use the "Reset numbering within each panel" checkbox to apply the `"onpanel"` mode in this demo.

Questions are numbered starting with 1. If you want to start numbering with a different number or use letters instead, specify `SurveyModel`'s [`questionStartIndex`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#questionStartIndex) property. You can include desired prefixes and suffixes in the property value:

```js
const surveyJson = {
  // ...
  "questionStartIndex": "a.", // a., b., c., ...
  "questionStartIndex": "#3", // #3, #4, #5, ...
  "questionStartIndex": "(B)." // (B)., (C)., (D)., ...
}
```

To access the number of an individual question, use its [`no`](https://surveyjs.io/form-library/documentation/api-reference/question#no) property. Note that the property's value may contain letters, prefixes, and suffixes if the `questionStartIndex` specifies them. If you want to hide a question number, set the [`showNumber`](https://surveyjs.io/form-library/documentation/api-reference/question#showNumber) property to `false`.

## How to Number Panels

Panels have numbers only in recursive numbering mode. If you want to number panels in other modes, enable the [`showNumber`](https://surveyjs.io/form-library/documentation/api-reference/panel-model#showNumber) property for each panel that should have a number. The [`no`](https://surveyjs.io/form-library/documentation/api-reference/panel-model#no) property allows you to access the panel number. This demo displays the "Show panel numbers" checkbox that lets you change page number visibility.

## How to Number Pages

Pages do not have numbers, but you can enable `SurveyModel`'s [`showPageNumbers`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#showPageNumbers) property to display them. In this demo, click the "Show page numbers" checkbox to show or hide page numbers at runtime.

## 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 = {
  "pages": [
   {
    "name": "page1",
    "title": "Page 1",
    "elements": [
     {
      "type": "text",
      "name": "question1",
      "title": "Question 1"
     },
     {
      "type": "panel",
      "name": "panel1",
      "title": "Panel 1",
      "showNumber": true,
      "innerIndent": 1,
      "elements": [
       {
        "type": "text",
        "name": "panel1-question1",
        "title": "Panel 1, nested question 1"
       },
       {
        "type": "text",
        "name": "panel1-question2",
        "title": "Panel 1, nested question 2"
       }
      ]
     }
    ]
   },
   {
    "name": "page2",
    "title": "Page 2",
    "elements": [
     {
      "type": "panel",
      "name": "panel2",
      "title": "Panel 2",
      "showNumber": true,
      "innerIndent": 1,
      "elements": [
       {
        "type": "text",
        "name": "panel2-question1",
        "title": "Panel 2, nested question 1"
       },
       {
        "type": "text",
        "name": "panel2-question2",
        "title": "Panel 2, nested question 2"
       }
      ]
     },
     {
      "type": "text",
      "name": "question2",
      "title": "Question 2"
     },
     {
      "type": "text",
      "name": "question3",
      "title": "Question 3"
     }
    ]
   },
   {
    "name": "page3",
    "title": "Page 3",
    "elements": [
     {
      "type": "text",
      "name": "question4",
      "title": "Question 4"
     },
     {
      "type": "panel",
      "name": "panel3",
      "title": "Panel 3",
      "showNumber": true,
      "innerIndent": 1,
      "elements": [
       {
        "type": "text",
        "name": "panel3-question1",
        "title": "Panel 3, nested question 1"
       },
       {
        "type": "text",
        "name": "panel3-question2",
        "title": "Panel 3, nested question 2"
       }
      ]
     }
    ]
   }
  ],
  "showPageNumbers": true,
  "showQuestionNumbers": true
};
```

### `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/how-to-number-pages-and-questions/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/how-to-number-pages-and-questions/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/how-to-number-pages-and-questions/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/how-to-number-pages-and-questions/vanillajs.md)