---
title: "Repeatable group"
description: "This article explains what the repeatable group is and how to configure it."
meta_title: "Repeatable group"
category: "fields"
audience: developers
lastUpdated: "2025-11-06T01:07:50.000Z"
---

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.

Repeatable groups can be displayed using a loop.

**Next.js example:**

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

**Nuxt example:**

```vue-html
<ul>
  <li v-for="item in slice.primary.my_repeatable_group">
    {{ item.feature }}
  </li>
</ul>
```

**SvelteKit example:**

```svelte
<ul>
  {#each slice.primary.my_repeatable_group as item}
    <li>{item.feature}</li>
  {/each}
</ul>
```

> A repeatable group cannot contain another repeatable group.

# Add a repeatable group to a content model

1. **Open Slice Machine**

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

   ```sh
   npx start-slicemachine --open
   ```

2. **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](https://prismic.io/docs/guides/page-builder.md). Use an easily understood name.

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

3. **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.

4. **(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`.

**Next.js example:**

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

**Nuxt example:**

```vue-html
<ul>
  <li v-for="item in slice.primary.my_repeatable_group">
    {{ item.feature }}
  </li>
</ul>
```

**SvelteKit example:**

```svelte
<ul>
  {#each slice.primary.my_repeatable_group as item}
    <li>{item.feature}</li>
  {/each}
</ul>
```

Repeatable groups that are [non-repeatable](#optional-make-the-repeatable-group-non-repeatable) should access their fields using `[0]`:

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

# Check if a repeatable group has items

Use `isFilled.group()` from [`@prismicio/client`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md) to check if a repeatable group has items.

```ts
import { isFilled } from "@prismicio/client";

if (isFilled.group(slice.primary.my_group)) {
  // Do something if `my_group` has items.
}
```

[Learn more about `isFilled`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#isfilled)

# API response

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

```json
{
  "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.

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