Add/Remove Fields Showcase

Add/Remove Fields Showcase

A lightweight integration pattern for repeatable fields like phone numbers, email addresses, and short editable tags.

Live Preview

Features Demonstrated

• CSS: buttons, inputs, form-field, and input-edit
• Repeatable rows with add/remove actions
• Inline keyword editing with .dsx-input-edit
• A true empty state with only the dashed add button visible

Pattern Summary

<div id="phone-list">
  <div class="field-row">
    <div class="dsx-field">
      <label class="dsx-field__label">Phone number</label>
      <div class="dsx-field__control">
        <input class="dsx-input" type="tel">
      </div>
    </div>

    <button
      type="button"
      class="dsx-btn dsx-btn--icon dsx-btn--danger"
      aria-label="Remove phone number"
      onclick="removeRow(this)"
    >
      ×
    </button>
  </div>
</div>

<button
  type="button"
  class="dsx-btn dsx-btn--dashed"
  onclick="addRow(document.getElementById('phone-list'), document.getElementById('phone-row-template'))"
>
  Add phone number
</button>

<script>
function addRow(container, template) {
  const row = template.content.cloneNode(true);
  container.appendChild(row);
}
function removeRow(btn) {
  btn.closest('.field-row').remove();
}
</script>

Usage Notes

• Keep the dashed add action at the bottom of each repeatable group.
• Use a destructive icon button for per-row removal.
• .dsx-input-edit works well when a tag stays inline and only one item is edited at a time.