<Repeater>

Skip past table of contents

Search

Table of contents

Start of documentation content

The Repeater can repeat parts of forms.

The Repeater will repeat all components below itself in the Tree View (ie, indented below itself in the hierarchy).

For example, if you want to accept multiple contact details, each with a name and phone number, you would use a Repeater with two Text fields indented below.

The Repeater can be nested e.g. A form with multiple contact details, each with a single name but multiple phone numbers.

Use of <Repeater>

<Repeater

  id="myRepeater"

  repeaterItemTitleHtml={{ en: "Item repeaterNumber" }}

  addButtonHtml={{ en: 'Add' }}

  removeButtonHtml={{ en: 'Remove' }}

  minRepeats={1}

  maxRepeats={10}

>

  [any components to repeat, including form fields]

</Repeater>

Repeater item number in repeaterItemTitleHtml.

Use "repeaterNumber" (without speechmarks) and this will be replaced with the repeater item number.

<Repeater>'s props

PropAboutType
addButtonHtml

Localisable HTML: add repeatable button content.

E.g.

{
  en: 'Add new contact',
}
LocalisedHtml
hideInAnswerSummary

Whether to hide any answers below this.

boolean
maxRepeats

The maximum number of repeatable items.

This value is optional.

number
minRepeats

The minimum number of repeatable items.

You probably want to set this to 1.

This value is optional.

number
removeButtonHtml

Localisable HTML: remove repeatable button content.

E.g.

{
  en: 'Remove contact',
}
LocalisedHtml
repeaterItemTitleHtml

Localisable HTML: title of each repeater item.

LocalisedHtml
id

Component Id.

Must be unique within the form.

string
meta

Arbitrary metadata on this node.

This is useful when developing custom controls as it allows you to pass down metadata/extensions.

string
childrenById

Used to indicate children ids of this component.

If used in React this is non-editable.

string[]
hasChildrenById

Non-editable.

Used to indicate that this component can have children.

true
hasTagsById

Non-editable.

Used to indicate that this component isn't a form field with tags by id.

false
isFormField

Non-editable.

Used to indicate that this component isn't a form field.

false
isMultichoice

Non-editable.

Used to indicate that this component isn't a multichoice form field like <Select>, <Radios> or <Checkboxes>.

false
type

Non-editable.

Type of component of "Repeater".

"Repeater"