Pre-filled items

A Multifield item can have a pre-filled content different from the Multifield template. But added items will always be generated based on the template.

Child elements of <coral-multifield> can be given a special attribute to enable functionality.

• [coral-multifield-add] - Click to add an item

<coral-multifield>
  <coral-multifield-item>
    <input is="coral-textfield" type="text" value="Basel">
  </coral-multifield-item>
  <button coral-multifield-add type="button" is="coral-button">Add a field</button>
  <template coral-multifield-template>
    <input is="coral-textfield" type="text">
  </template>
</coral-multifield>

IE11 template limitation

Multifield partially supports the template element on IE11. If adding/removing items in the template is required, template.content should be used.

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var multifield = new Coral.Multifield();
    // Use template.content to be able to specify the template content dynamically on IE11.
    multifield.template.content.appendChild(new Coral.Textfield());
  
    var add = new Coral.Button();
    add.label.textContent = 'Add a field';
    add.setAttribute('coral-multifield-add', '');
    multifield.appendChild(add);
  
    var constructorExample = document.getElementById('constructorExample');
    constructorExample.appendChild(multifield);
  });
</script>