RepeatFieldSet

A repeatable field-set control

Import

import { RepeatFieldSet } from "@schukai/monster/source/components/form/repeat-field-set.mjs";

Source

View source code

Package

@schukai/monster

Since

3.78.0

Introduction

monster-repeat-field-set repeats structured groups of fields so users can enter a variable number of similar records.

Key Features

Repeatable groups: Adds and removes field collections dynamically.
Structured input: Keeps repeating data aligned and readable.
Form integration: Works with validation and submission workflows.

Repeatable Contacts

This example binds a repeatable contact list to monster-form so added or removed items immediately update the underlying form data.

Javascript

import "@schukai/monster/source/components/form/form.mjs";
import "@schukai/monster/source/components/form/repeat-field-set.mjs";

const form = document.getElementById("repeat-field-set-form");
const repeatFieldSet = document.getElementById("repeat-field-set-demo");
const log = document.getElementById("repeat-field-set-log");

form.setOption("data", {
  contacts: [
    { name: "Alex Meyer", role: "Operations" },
    { name: "Lina Hoffmann", role: "Support" },
  ],
});

const render = () => {
  log.textContent = JSON.stringify(form.getOption("data"), null, 2);
};

repeatFieldSet.addEventListener("monster-repeat-change", render);
repeatFieldSet.addEventListener("monster-repeat-add", render);
repeatFieldSet.addEventListener("monster-repeat-remove", render);

render();<script type="module">import "@schukai/monster/source/components/form/form.mjs";
import "@schukai/monster/source/components/form/repeat-field-set.mjs";

const form = document.getElementById("repeat-field-set-form-run");
const repeatFieldSet = document.getElementById("repeat-field-set-demo-run");
const log = document.getElementById("repeat-field-set-log-run");

form.setOption("data", {
  contacts: [
    { name: "Alex Meyer", role: "Operations" },
    { name: "Lina Hoffmann", role: "Support" },
  ],
});

const render = () => {
  log.textContent = JSON.stringify(form.getOption("data"), null, 2);
};

repeatFieldSet.addEventListener("monster-repeat-change", render);
repeatFieldSet.addEventListener("monster-repeat-add", render);
repeatFieldSet.addEventListener("monster-repeat-remove", render);

render();</script>

HTML

<monster-form id="repeat-field-set-form"></monster-form>
<monster-repeat-field-set
  id="repeat-field-set-demo"
  data-monster-option-path="contacts"
  data-monster-option-min="1"
  data-monster-option-max="4"
>
  <template slot="item">
    <label>
      Name
      <input
        type="text"
        data-monster-bind="value path:item.name"
        data-monster-defaultvalue=""
      />
    </label>
    <label>
      Role
      <input
        type="text"
        data-monster-bind="value path:item.role"
        data-monster-defaultvalue=""
      />
    </label>
  </template>
</monster-repeat-field-set>
<pre
  id="repeat-field-set-log"
  style="padding:var(--monster-space-4);border:1px solid var(--monster-color-border-2);border-radius:var(--monster-border-radius);background:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1);overflow:auto;"
></pre>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Component Design

The component builds on the field-set concept and manages repeated instances of the same field structure, including add and remove controls.

Styling Hooks

labels: Customizes add or remove copy.
dataset: Supplies workflow-specific repeat settings.
::part(...): Styles repeated rows, controls, and wrappers.

HTML Structure

<monster-repeat-field-set></monster-repeat-field-set>

JavaScript Initialization

const element = document.createElement('monster-repeat-field-set');
document.body.appendChild(element);

Exported

RepeatFieldSet

Derived from

CustomControl

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the CustomControl.

Option

Type

Default

Description

templates

object

Template definitions

templates.main

string

undefined

Main template

labels

object

undefined

Label definitions

labels.add

string

undefined

Add label

labels.remove

string

undefined

Remove label

classes

object

Class definitions

classes.content

string

collapse-alignment-no-padding

Content class

path

string

Data path relative to the form record

min

number|null

Minimum items

max

number|null

Maximum items

disabled

boolean

false

Disabled state

since
deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the CustomControl.

data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the CustomControl.

State query methods

value()

Returns

{string}

The current value of the control.

value(value)

Parameters

value {string}: value

Returns

{void}

Set the value of the control.

Static methods

[instanceSymbol]()

Returns

{symbol}

This method is called by the instanceof operator.

getCSSStyleSheet()

Returns

{CSSStyleSheet[]}

getTag()

Returns

{string}

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()

Returns

{RepeatFieldSet}

Events

The component emits the following events:

monster-repeat-add
monster-repeat-remove
monster-repeat-change

For more information on how to handle events, see the mdn documentation.

The current width of the area is too small to display the content correctly.