Repeater

Repeater components are Input Fields that allow the user to enter information as a list given a template. The information will be stored and returned as an array of objects.

Programmatic

repeater.ts

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      uid: 'repeater_basic',
      kind: 'input',
      type: 'repeater',
      path: 'guests',
      label: 'Guest List',
      props: {
        addLabel: 'Add Guest',
        removeLabel: 'Remove Guest',
        template: {
          kind: 'layout',
          type: 'flex',
          children: [
            {
              kind: 'input',
              type: 'textinput',
              path: 'guests.items.guest_name',
              label: 'Full Name',
            },
          ],
        },
      },
    },
  ],
});

JSON

repeater.json

{
  "form": [
    {
      "uid": "repeater_basic",
      "kind": "input",
      "type": "repeater",
      "path": "guests",
      "label": "Guest List",
      "props": {
        "addLabel": "Add Guest",
        "removeLabel": "Remove Guest",
        "template": {
          "kind": "layout",
          "type": "flex",
          "children": [
            {
              "kind": "input",
              "type": "textinput",
              "path": "guests.items.guest_name",
              "label": "Full Name"
            }
          ]
        }
      }
    }
  ]
}

Props

Use this props to customize your Repeater component.

prop	type	value
template	object	MANDATORY A template Field with the elements rendered by the repeater
addLabel	string	Label text for the add button
removeLabel	string	Label text for the remove button
limit	number	Maximum number of items that can be added
title	string	Optional title displayed at the top of each card
addButtonIcon	string	CSS class string for the icon displayed in the add button
removeButtonIcon	string	CSS class string for the icon displayed in the remove button

Template

Use the property template to render a tree of Field components for each item in the array of the Repeater component. The path in the Input Fields components inside the template will be updated replacing items keyword by the index of the array. For example, users.items.firstName will be replaced by users[0].firstName for the first element and so on.

Programmatic

repeater.ts

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      uid: 'repeater_basic',
      kind: 'input',
      type: 'repeater',
      path: 'guests',
      label: 'Guest List',
      props: {
        addLabel: 'Add Guest',
        removeLabel: 'Remove Guest',
        template: {
          kind: 'layout',
          type: 'flex',
          children: [
            {
              kind: 'input',
              type: 'textinput',
              path: 'guests.items.guest_name',
              label: 'Full Name',
            },
          ],
        },
      },
    },
  ],
});

JSON

repeater.json

{
  "form": [
    {
      "uid": "repeater_basic",
      "kind": "input",
      "type": "repeater",
      "path": "guests",
      "label": "Guest List",
      "props": {
        "addLabel": "Add Guest",
        "removeLabel": "Remove Guest",
        "template": {
          "kind": "layout",
          "type": "flex",
          "children": [
            {
              "kind": "input",
              "type": "textinput",
              "path": "guests.items.guest_name",
              "label": "Full Name"
            }
          ]
        }
      }
    }
  ]
}

Add and Remove Labels

Use the property addLabel and removeLabel to set custom labels for the Add and Remove button.

Programmatic

repeater.ts

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'repeater',
      path: 'users',
      defaultValue: [
        {
          firstName: 'John',
          lastName: 'Doe',
        },
        {
          firstName: 'Jane',
          lastName: 'Doe',
        },
      ],
      props: {
        addLabel: 'Add new developer',
        removeLabel: 'Remove developer',
        template: {
          kind: 'layout',
          type: 'flex',
          children: [
            {
              kind: 'input',
              type: 'textinput',
              path: 'users.items.firstName',
            },
            {
              kind: 'input',
              type: 'textinput',
              path: 'users.items.lastName',
            },
          ],
        },
      },
    },
  ],
});

JSON

repeater.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "repeater",
      "path": "users",
      "defaultValue": [
        {
          "firstName": "John",
          "lastName": "Doe"
        },
        {
          "firstName": "Jane",
          "lastName": "Doe"
        }
      ],
      "props": {
        "addLabel": "Add new developer",
        "removeLabel": "Remove developer",
        "template": {
          "uid": "",
          "kind": "layout",
          "type": "flex",
          "children": [
            {
              "uid": "",
              "kind": "input",
              "type": "textinput",
              "path": "users.items.firstName"
            },
            {
              "uid": "",
              "kind": "input",
              "type": "textinput",
              "path": "users.items.lastName"
            }
          ]
        }
      }
    }
  ]
}

Limit

Use the property limit to set a limit to the number of elements that can be added to a repeater.

Programmatic

repeater.ts

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      uid: 'repeater_limit',
      kind: 'input',
      type: 'repeater',
      path: 'contacts',
      label: 'Emergency Contacts',
      props: {
        limit: 3,
        addLabel: 'Add Contact',
        removeLabel: 'Delete',
        template: {
          kind: 'layout',
          type: 'flex',
          children: [
            {
              kind: 'input',
              type: 'textinput',
              path: 'contacts.items.phone',
              label: 'Phone Number',
            },
          ],
        },
      },
    },
  ],
});

JSON

repeater.json

{
  "form": [
    {
      "uid": "repeater_limit",
      "kind": "input",
      "type": "repeater",
      "path": "contacts",
      "label": "Emergency Contacts",
      "props": {
        "limit": 3,
        "addLabel": "Add Contact",
        "removeLabel": "Delete",
        "template": {
          "kind": "layout",
          "type": "flex",
          "children": [
            {
              "kind": "input",
              "type": "textinput",
              "path": "contacts.items.phone",
              "label": "Phone Number"
            }
          ]
        }
      }
    }
  ]
}

Card Title

Use the property title to display a static title at the top of each card.

Programmatic

repeater.ts

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      uid: 'repeater_title',
      kind: 'input',
      type: 'repeater',
      path: 'guests',
      label: 'Guest List',
      props: {
        title: 'Guest',
        addLabel: 'Add Guest',
        removeLabel: 'Remove',
        template: {
          kind: 'layout',
          type: 'flex',
          children: [
            {
              kind: 'input',
              type: 'textinput',
              path: 'guests.items.guest_name',
              label: 'Full Name',
            },
          ],
        },
      },
    },
  ],
});

JSON

repeater.json

{
  "form": [
    {
      "uid": "repeater_title",
      "kind": "input",
      "type": "repeater",
      "path": "guests",
      "label": "Guest List",
      "props": {
        "title": "Guest",
        "addLabel": "Add Guest",
        "removeLabel": "Remove",
        "template": {
          "kind": "layout",
          "type": "flex",
          "children": [
            {
              "kind": "input",
              "type": "textinput",
              "path": "guests.items.guest_name",
              "label": "Full Name"
            }
          ]
        }
      }
    }
  ]
}

Button Icons

Use the properties addButtonIcon and removeButtonIcon to display an icon inside the add and remove buttons. Icons are passed as a CSS class string, the same way as other icon props in the library.

Programmatic

repeater.ts

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      uid: 'repeater_icons',
      kind: 'input',
      type: 'repeater',
      path: 'guests',
      label: 'Guest List',
      props: {
        addLabel: 'Add Guest',
        removeLabel: 'Remove',
        addButtonIcon: 'add',
        removeButtonIcon: 'remove',
        template: {
          kind: 'layout',
          type: 'flex',
          children: [
            {
              kind: 'input',
              type: 'textinput',
              path: 'guests.items.guest_name',
              label: 'Full Name',
            },
          ],
        },
      },
    },
  ],
});

JSON

repeater.json

{
  "form": [
    {
      "uid": "repeater_icons",
      "kind": "input",
      "type": "repeater",
      "path": "guests",
      "label": "Guest List",
      "props": {
        "addLabel": "Add Guest",
        "removeLabel": "Remove",
        "addButtonIcon": "add",
        "removeButtonIcon": "remove",
        "template": {
          "kind": "layout",
          "type": "flex",
          "children": [
            {
              "kind": "input",
              "type": "textinput",
              "path": "guests.items.guest_name",
              "label": "Full Name"
            }
          ]
        }
      }
    }
  ]
}

Nested Repeaters

Repeaters can be nested inside other repeaters to model hierarchical data structures. Each nesting level adds an additional .items. segment to the path. For example, in a Teams → Members structure:

• The outer repeater path is teams
• Fields inside the outer template use teams.items.fieldName
• The inner repeater path is teams.items.members
• Fields inside the inner template use teams.items.members.items.fieldName

At runtime, each items token is replaced by the corresponding array index. For instance, teams.items.members.items.memberName becomes teams[0].members[1].memberName for the second member of the first team.

Programmatic

repeater.ts

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      uid: 'team_repeater',
      kind: 'input',
      type: 'repeater',
      path: 'teams',
      label: 'Teams',
      props: {
        addLabel: 'Add Team',
        removeLabel: 'Remove Team',
        template: {
          kind: 'layout',
          type: 'flex',
          props: {
            direction: 'column',
          },
          children: [
            {
              kind: 'input',
              type: 'textinput',
              path: 'teams.items.teamName',
              label: 'Team Name',
            },
            {
              uid: 'member_repeater',
              kind: 'input',
              type: 'repeater',
              path: 'teams.items.members',
              label: 'Members',
              props: {
                addLabel: 'Add Member',
                removeLabel: 'Remove Member',
                template: {
                  kind: 'layout',
                  type: 'flex',
                  children: [
                    {
                      kind: 'input',
                      type: 'textinput',
                      path: 'teams.items.members.items.memberName',
                      label: 'Member Name',
                    },
                  ],
                },
              },
            },
          ],
        },
      },
    },
  ],
});

JSON

repeater.json

{
  "form": [
    {
      "uid": "team_repeater",
      "kind": "input",
      "type": "repeater",
      "path": "teams",
      "label": "Teams",
      "props": {
        "addLabel": "Add Team",
        "removeLabel": "Remove Team",
        "template": {
          "kind": "layout",
          "type": "flex",
          "props": {
            "direction": "column"
          },
          "children": [
            {
              "kind": "input",
              "type": "textinput",
              "path": "teams.items.teamName",
              "label": "Team Name"
            },
            {
              "uid": "member_repeater",
              "kind": "input",
              "type": "repeater",
              "path": "teams.items.members",
              "label": "Members",
              "props": {
                "addLabel": "Add Member",
                "removeLabel": "Remove Member",
                "template": {
                  "kind": "layout",
                  "type": "flex",
                  "children": [
                    {
                      "kind": "input",
                      "type": "textinput",
                      "path": "teams.items.members.items.memberName",
                      "label": "Member Name"
                    }
                  ]
                }
              }
            }
          ]
        }
      }
    }
  ]
}

Styling

Repeaters can be styled as explained in the Styling Guide.

CSS Variables

Following you will find a list with the CSS Variables and a quick description of what you will style.

CSS Variable	Description
--gui-space-gap	Space between each repeater element
--gui-field-gap	Space between Add/Remove buttons
--gui-padding	Repeater element padding
--gui-color-border	Repeater element border color
--gui-radius	Repeater element border radius
--gui-color-bg	Repeater element background color
--gui-color-fg	Repeater element text color

Anatomy

This is the anatomy of the Repeater Component in case you want to use your CSS styles.

repeater.html

<div class="gui-repeater">
  <div id="repeater_uid">
    <h2>Guest List</h2>

    <div class="gui-repeater__card">
      <div class="gui-repeater__card-header">
        <span class="gui-repeater__card-title">Guest</span>

        <button type="button" class="gui-button gui-repeater__remove-btn">
          <span class="gui-button-icon delete"></span>
          Remove Guest
        </button>
      </div>

      <gui-repeater-widget>
        <div class="gui-label">
          <label>Full Name</label>
        </div>
        <div class="gui-widget">
          <input type="text" value="John Doe" />
        </div>
      </gui-repeater-widget>
    </div>

    <button type="button" class="gui-button gui-repeater__add-btn">
      <span class="gui-button-icon person_add"></span>
      Add Guest
    </button>
  </div>
</div>