GitHub

Components / Form & Input / Copy field

Copy field beta

A value that exists to be copied: install commands, tokens, links. One click, confirmed in place.

Preview
npx kata-ui add switch
sk-demo-4f8c2e91b7 
<div style="display:grid;gap:10px;max-width:430px">
  <div class="k-copyfield" data-copy-field>
    <code>npx kata-ui add switch</code>
    <button class="k-copyfield-btn" type="button" data-copy-btn aria-label="Copy value">Copy</button>
  </div>
  <div class="k-copyfield" data-copy-field>
    <code>sk-demo-4f8c2e91b7</code>
    <button class="k-copyfield-btn" type="button" data-copy-btn aria-label="Copy value">Copy</button>
  </div>
</div>
/* KATA Copy field */
.k-copyfield{display:flex;align-items:center;gap:8px;height:38px;padding-left:12px;padding-right:4px;border:1px solid var(--k-line);border-radius:var(--k-radius);background:var(--k-bg)}
.k-copyfield code{font-family:var(--k-mono);font-size:12.5px;color:var(--k-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-copyfield-btn{margin-left:auto;flex:none;height:30px;padding:0 12px;border:0;border-radius:var(--k-radius-sm);background:var(--k-ink);color:var(--k-on-color);font-family:var(--k-font);font-size:12.5px;font-weight:550;cursor:pointer;transition:background .15s}
.k-copyfield-btn:hover{opacity:.88}
.k-copyfield[data-copied="true"] .k-copyfield-btn{background:var(--k-accent)}

// KATA Copy field — click to copy, confirm in place.
document.querySelectorAll('[data-copy-field]').forEach(function (field) {
  var btn = field.querySelector('[data-copy-btn]');
  var val = field.querySelector('code');
  if (!btn || !val) return;
  var timer = null;
  btn.addEventListener('click', function () {
    var text = val.textContent.trim();
    function done() {
      field.dataset.copied = 'true';
      btn.textContent = 'Copied';
      clearTimeout(timer);
      timer = setTimeout(function () {
        field.dataset.copied = 'false';
        btn.textContent = 'Copy';
      }, 1600);
    }
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(text).then(done, done);
    } else {
      var ta = document.createElement('textarea');
      ta.value = text;
      document.body.appendChild(ta);
      ta.select();
      try { document.execCommand('copy'); } catch (e) {}
      document.body.removeChild(ta);
      done();
    }
  });
});

Usage

For values the user will paste somewhere else. The button confirms with 'Copied' for a moment — no toast needed for something this small.

Accessibility

The button keeps a stable aria-label ('Copy value'). The visible label changes to 'Copied', which screen readers announce as the button's name.

Previous
Combobox