Repeater

Repeater components are Control 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.

repeater.json

{
  "form": {
    "uid": "",
    "kind": "layout",
    "widget": "stack",
    "children": [
      {
        "uid": "",
        "kind": "control",
        "widget": "repeater",
        "path": "users",
        "defaultValue": [
          {
            "firstName": "John",
            "lastName": "Doe"
          },
          {
            "firstName": "Jane",
            "lastName": "Doe"
          }
        ],
        "props": {
          "template": {
            "uid": "",
            "kind": "layout",
            "widget": "stack",
            "children": [
              {
                "uid": "",
                "kind": "control",
                "widget": "textinput",
                "path": "users.items.firstName"
              },
              {
                "uid": "",
                "kind": "control",
                "widget": "textinput",
                "path": "users.items.lastName"
              }
            ]
          }
        }
      }
    ]
  }
}

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	A placeholder text to display when the text input has no value
removeLabel	string	A description to display below the text input
limit	number	A css class to display an icon

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 Control 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.

repeater.json

{
  "form": {
    "uid": "",
    "kind": "layout",
    "widget": "stack",
    "children": [
      {
        "uid": "",
        "kind": "control",
        "widget": "repeater",
        "path": "users",
        "defaultValue": [
          {
            "firstName": "John",
            "lastName": "Doe"
          },
          {
            "firstName": "Jane",
            "lastName": "Doe"
          }
        ],
        "props": {
          "template": {
            "uid": "",
            "kind": "layout",
            "widget": "stack",
            "children": [
              {
                "uid": "",
                "kind": "control",
                "widget": "textinput",
                "path": "users.items.firstName"
              },
              {
                "uid": "",
                "kind": "control",
                "widget": "textinput",
                "path": "users.items.lastName"
              }
            ]
          }
        }
      }
    ]
  }
}

Add and Remove Labels

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

repeater.json

{
  "form": {
    "uid": "",
    "kind": "layout",
    "widget": "stack",
    "children": [
      {
        "uid": "",
        "kind": "control",
        "widget": "repeater",
        "path": "users",
        "defaultValue": [
          {
            "firstName": "John",
            "lastName": "Doe"
          },
          {
            "firstName": "Jane",
            "lastName": "Doe"
          }
        ],
        "props": {
          "addLabel": "Add new developer",
          "removeLabel": "Remove developer",
          "template": {
            "uid": "",
            "kind": "layout",
            "widget": "stack",
            "children": [
              {
                "uid": "",
                "kind": "control",
                "widget": "textinput",
                "path": "users.items.firstName"
              },
              {
                "uid": "",
                "kind": "control",
                "widget": "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.

repeater.json

{
  "form": {
    "uid": "",
    "kind": "layout",
    "widget": "stack",
    "children": [
      {
        "uid": "",
        "kind": "control",
        "widget": "repeater",
        "path": "users",
        "defaultValue": [
          {
            "firstName": "John",
            "lastName": "Doe"
          },
          {
            "firstName": "Jane",
            "lastName": "Doe"
          }
        ],
        "props": {
          "limit": 2,
          "template": {
            "uid": "",
            "kind": "layout",
            "widget": "stack",
            "children": [
              {
                "uid": "",
                "kind": "control",
                "widget": "textinput",
                "path": "users.items.firstName"
              },
              {
                "uid": "",
                "kind": "control",
                "widget": "textinput",
                "path": "users.items.lastName"
              }
            ]
          }
        }
      }
    ]
  }
}

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

<gui-repeater>
  <div id="fieldUid">
    <h2>Label</h2>
    <div class="card">
      <gui-stack class="gui-stack">
        <!-- CONTENT -->
      </gui-stack>
      <button type="button" class="gui-button" disabled>Remove</button>
    </div>
    <button type="button" class="gui-button" disabled>ADD</button>
  </div>
</gui-repeater>