Theme: Light | Lightest | Dark | Darkest Scale: Medium | Large

Multi Field

Usage notes

Multifields enable adding, reordering, and removing multiple instances of a text field.

Default


        <coral-multifield aria-label="Default multifield">
          <coral-multifield-item>
            <input is="coral-textfield" aria-label="input" 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" aria-label="input" type="text">
          </template>
        </coral-multifield>

Nested multifield

Toggle markup


        <coral-multifield aria-label="Fieldsets">
          <coral-multifield-item>
            <coral-multifield aria-label="Fieldset">
              <coral-multifield-item></coral-multifield-item>
              <coral-multifield-item></coral-multifield-item>
              <button coral-multifield-add="" type="button" is="coral-button">Add a field</button>
              <template coral-multifield-template="">
                <input is="coral-textfield" aria-label="input" type="text">
              </template>
            </coral-multifield>
          </coral-multifield-item>
          <button coral-multifield-add="" type="button" is="coral-button">Add a fieldset</button>
          <template coral-multifield-template="">
            <coral-multifield aria-label="Fieldset">
              <coral-multifield-item></coral-multifield-item>
              <coral-multifield-item></coral-multifield-item>
              <button coral-multifield-add="" type="button" is="coral-button">Add a field</button>
              <template coral-multifield-template="">
                <input is="coral-textfield" aria-label="input" type="text">
              </template>
            </coral-multifield>
          </template>
        </coral-multifield>

Rendered with JS

Toggle markup


        <div id="with-js"></div>
        <script>
          window.addEventListener('load', function() {
            var multifield = new Coral.Multifield();
            multifield.setAttribute('aria-label', 'Multifield rendered with JS');
            var input = document.createElement('input', {is: 'coral-textfield'});
            input.setAttribute('aria-label', 'input');
            multifield.template.content.appendChild(input);
            multifield.items.add(new Coral.Multifield.Item());
            var addButton = document.createElement('button', {is: 'coral-button'});
            addButton.setAttribute('coral-multifield-add', '');
            addButton.label.textContent = 'Add a field';
            addButton.type = 'button';
            multifield.appendChild(addButton);

            document.getElementById('with-js').appendChild(multifield);
          });
        </script>

With Min specified

Toggle markup


        <coral-multifield aria-label="Multifield with min specified" min="2">
          <button coral-multifield-add="" type="button" is="coral-button">Add a field</button>
          <template coral-multifield-template="">
            <input is="coral-textfield" aria-label="input" type="text">
          </template>
        </coral-multifield>

Readonly

Toggle markup


        <coral-multifield readonly="" aria-label="Readonly multifield">
          <coral-multifield-item>
            <input is="coral-textfield" aria-label="input" type="text" value="Hello">
          </coral-multifield-item>
          <coral-multifield-item>
            <input is="coral-textfield" aria-label="input" type="text" value="World">
          </coral-multifield-item>
          <button coral-multifield-add="" type="button" is="coral-button">Add a field</button>
          <template coral-multifield-template="">
            <input is="coral-textfield" aria-label="input" type="text">
          </template>
        </coral-multifield>

With renderupdown

Toggle markup


        <coral-multifield aria-label="Multifield with reorderupdown specified" reorderupdown="">
          <coral-multifield-item>
            <input is="coral-textfield" aria-label="input" type="text" value="Basel">
          </coral-multifield-item>
          <coral-multifield-item>
            <input is="coral-textfield" aria-label="input" type="text" value="London">
          </coral-multifield-item>
          <button coral-multifield-add="" type="button" is="coral-button">Add a field</button>
          <template coral-multifield-template="">
            <input is="coral-textfield" aria-label="input" type="text">
          </template>
        </coral-multifield>