The repeat field is a field that allows you to select multiple Custom Fields and input data in your preferred order repeatedly.
The entered data is returned as an array, enabling a high degree of design flexibility on the frontend.

To use the repeat field, you need to create Custom Fields in advance.

For information on creating Custom Fields, please see this page.

How to Set Up Fields

Assuming that the following Custom Fields have been created, I will explain how to set them up.

• heading: Text Field
• link: Text Field
• text: Rich Editor
• image: Image
• imageText: Image + Rich Editor
• relatedLinks: Multiple Content Reference

Next, to set up a repeating field using these Custom Fields, go to "API Settings" → "API Schema" and select "Repeating" as the field type.

A modal window will open, allowing you to select which Custom Fields you want to use from the ones you have set up in advance. Check the ones you want to use and click "Decide."

How to Submit Data

Next, I will explain how to submit data in the editing screen.
When a repeating field is set up, the following field (Repeating Field (Demo)) will be available.

Clicking the "Add Field" button will display a popup to select which Custom Field to use.

If you select "heading" here, the Custom Field set as a heading (Text Field) will be displayed.

Additionally, there are "+" buttons above and below the field, allowing you to add fields above or below by clicking them.

Next, click the lower "+" button to add "Image + Text."
Then, you can arrange the fields as follows: "1. Heading" and "2. Image + Text."

Additionally, when you hover over a repeat field, a "×" button will appear in the upper right corner of each field, allowing you to delete the field by clicking it.

Please refer to the following documentation for information on uploading using the API and CSV.

Limitations / Notes

• There is no limit on the number of Custom Fields that can be set in a repeatable field.
• If you delete a Custom Field used in a repeatable field, the data that has already been registered using that field will continue to be displayed in the management screen, but will be excluded from the API response.

Field Detailed Settings

API Response

Now, let's input some values and retrieve data from the API. For confirmation, we will input as follows.

When you actually preview it in the API preview, you will get a response like the following.

{
    "id": "kkk7km7-ng",
    "createdAt": "2023-08-28T06:25:36.825Z",
    "updatedAt": "2023-08-28T06:25:36.825Z",
    "repeat": [
        {
            "fieldId": "heading",
            "heading": "This is a heading"
        },
        {
            "fieldId": "imageText",
            "image": {
                "url": "https://images.microcms-assets.io/assets/9c85391fec1147f2addc9287c298bfe3/9f4f434029274faaaafee7be9f115931/ogp.png",
                "height": 630,
                "width": 1200
            },
            "text": "<h1 id=\"h4a6e27f824\">What is a Repeating Field?</h1><p>This is a field that allows you to select multiple Custom Fields and repeat the input in any order you like.</p>"
        }
    ]
}

Please refer to the following documentation for the basic response format of the GET API.

How to Use in Frontend

Define components for each element of the array (<Heading />, <ImageText />) and pass the values obtained via the API. Below is an implementation example in React.

export const Main = ({ repeat }) => (
  <main>
    {repeat.map((item, i) =>
      item.fieldId === 'heading' ? (
           // Use the component for displaying headings
        <Heading key={i} text={item.text} />
      ) : item.fieldId === 'imageText' ? (
           // Use the component for displaying image + text
        <ImageText key={i} image={item.image} text={item.text} />
      ) : null
    )}
  </main>
);

Here, the array of the repeat field (repeat) is transformed using the map() method, outputting the appropriate component for each fieldId. This allows you to build the view in the same order as entered in the editing screen.

Other Use Cases

Using repeat fields allows for the construction of flexible fields tailored to the expression.
We also have examples of use cases and implementations of repeat fields in the following blogs, so please refer to them as well.