<baht-repeater>

Array-of-rows control: every row renders the same sub-fields, one level deep. Edits emit the whole array.

Rows of sub-fields

Inside <baht-form> you never touch this element: a field with type "repeater" and fields[] renders it.

HTMLReactAngular

Copy

<baht-repeater></baht-repeater>

<script>
  const el = document.querySelector('baht-repeater');
  el.field = {
    "order": 1,
    "type": "repeater",
    "key": "servers",
    "label": "Servers",
    "fields": [
      {
        "order": 1,
        "type": "text",
        "key": "host",
        "label": "Host",
        "width": "1/2"
      },
      {
        "order": 2,
        "type": "dropdown",
        "key": "env",
        "label": "Environment",
        "width": "1/2",
        "options": [
          {
            "key": "prod",
            "label": "Production"
          },
          {
            "key": "stage",
            "label": "Staging"
          }
        ]
      }
    ]
  };
  el.value = [
    {
      "host": "srv-01",
      "env": "prod"
    }
  ];
</script>

Props

Name	Type	Default	Description
rowErrorsJS	ValidationError[]	[]	Validation errors to show per row
fieldJS	FieldDescriptor	—	Descriptor with type "repeater" and fields[] (sub-descriptors; no nesting)
valueJS	object[]	null	One object per row, keyed by sub-field key
disabled	boolean	false
readonly	boolean	false
required	boolean	false
show-optional	boolean	false	Append the localized "(optional)" marker to the label when not required (set by <baht-form show-optional>).
errorJS	string | null	null
debounce	number | undefined	—	Debounce for typed edits (ms); unset = BahtFieldBase.defaultDebounce.

Events

Event	detail	Description
name	CustomEvent
baht-input	{ key, value: object[] }	The whole array after any row edit, add or remove