Repeatable group

A repeatable group is used to create a repeatable collection of fields. It can be used to create an image gallery, a list of products, a navigation list, and more.

Add a repeatable group to a content model

• Open Slice Machine

  In your Prismic project, start Slice Machine to begin editing content models.

  npx start-slicemachine --open

• Add a repeatable group

  In Slice Machine, navigate to the slice, page type, or custom type you want to modify. Add a repeatable group.

  The label determines the label shown to content writers in the Page Builder. Use an easily understood name.

  The API ID determines the property name in the Document API. Use a short, snake-cased name.

• Add fields

  For each field needed in the repeatable group, click the Add a field button and select a field. All field types are supported.

• (Optional) Make the repeatable group non-repeatable

  A repeatable group can be configured as non-repeatable, visually grouping fields in the Page Builder while preventing content writers from repeating them.

  Open the repeatable group settings and uncheck the Repeatable setting.

Use repeatable groups

A repeatable group can be displayed using a loop.

This example uses a repeatable group named my_repeatable_group containing a text field named feature.

<ul>
  {slice.primary.my_repeatable_group.map((item) => (
    <li>{item.feature}</li>
  ))}
</ul>

Repeatable groups that are non-repeatable should access their fields using [0]:

const group = slice.primary.my_repeatable_group[0];

Tips

• Use isFilled.group() to check if a repeatable group has items

  import { isFilled } from "@prismicio/client";
  
  if (isFilled.group(slice.primary.my_group)) {
    // Do something if `my_group` has items.
  }

API response

Here is what a repeatable group looks like from the Document API:

{
  "example_repeatable_group": [
    {
      "description": "Carrot",
      "price": 55
    },
    {
      "description": "Apple",
      "price": 60
    }
  ]
}

The repeatable field’s content is determined by its fields.

A non-repeatable group returns a single-element array.

{
  "example_repeatable_group": [
    {
      "description": "Carrot",
      "price": 55
    }
  ]
}