SurveyJS lets you create smart, flexible forms that adapt to your needs. One of its most powerful tools is the Dynamic Panel, an input type that supports question nesting and allows users to add and remove repeat question groups dynamically. If you need to collect repeating data, such as a list of addresses, previous employers, or family members, repeatable form fields are the way to go.

In this guide, we'll show you how to create a form section with repeatable question groups and let respondents clone input groups on the fly using a Dynamic Panel.

To create a group of repeatable form fields:

1. Add a Dynamic Panel to your form.

2. Give it a name (panel ID) and a title.

3. Optionally, add a description.

   

4. Fill your panel with questions.

In our example, we'll ask a respondent to input multiple addresses where they lived at in the past 10 years. Each panel entry will represent one address.

To help users identify each repeated section, you can use a dynamic title pattern:

1. Select the Dynamic Panel.
2. Under General, locate the Panel title pattern property.
3. Enter a pattern, for example: Address #{panelIndex}.

Use curly brackets for dynamic values, e.g. {panelIndex} adds a section number. To source a value from one of the panel fields, access it using the following syntax: {panel.questionid}, where panel is a keyword used to access questions within the same section, and questionid is the name of the source value question. Watch the video below to see it in action.

Survey Creator supports three display modes for repeatable form groups.

In list mode, panels are shown one after another. You can control whether each section is expanded or collapsed using the Inner panel collapse state property. This mode is used by default.

In carousel mode, panels are shown one at a time with navigation buttons. A panel counter appears in the bottom-right.

In tabs mode, only one panel is visible at a time. Users can switch between panels using navigation buttons or clickable tab titles. You can set a custom Tab title pattern. If your title contains dynamic values, it's recommended to set a fallback Tab title placeholder that will be shown as a tab title when the tab title pattern fails to produce a meaningful value. Use Tab alignment to adjust layout.

You can control how many repeatable sections users can add using the following properties:

• Minimum panel count – Sets the minimum number of required entries.
• Initial panel count – Sets the number of panels visible on load.
• Maximum panel count – Sets the total number of panels allowed (e.g. two emergency contacts).

If both minimum and initial panel counts are set to 0, users will see a placeholder. You can customize it using the Empty panel text property.

Use the following properties to specify whether users can add and remove panels:

• Enable panel addition – Lets users add new sections.
• Enable panel removal – Lets users delete sections.
• Confirm panel deletion – Shows a confirmation dialog before deletion.

You can also customize button labels using the "Add Panel" button text and "Remove Panel" button text properties.

Long and complex repeated sections can overwhelm users, especially on mobile devices. To improve usability, SurveyJS offers a Show single input field per page mode. When enabled, the form loops through all fields in the section until the data set is complete. Then, a user can choose to add another data set or break the loop and proceed to the next question in the form (if there is one). Unlike the carousel and tabs modes, which limit the displayed fields to a single section, the loop-and-merge mode shows one question at a time within each panel entry. This allows users to step through the repeated section field by field and keeps them focused, especially when collecting complex, repeatable form data. Watch the video to see a survey layout mode comparison in action.

To enable the single-input-per-page mode, follow these steps:

1. Go to survey-level settings.
2. Under the Navigation category, locate the Survey layout property.
3. Set this property to Show single input field per page.

With Dynamic Panels, you can offer your respondent the flexibility to add multiple repeating sets of data to a form by cloning form fields dynamically as they proceed through the form. To further enhance your understanding and implementation of repeatable form groups in SurveyJS, explore the following demos:

Loop and Merge

Breakable Loop

Nested Loops