stimulus-zag

Appearance

Clipboard ​

A "copy to clipboard" control with a copied indicator.

html
<div
  data-controller="zag-clipboard"
  data-part="root"
  data-zag-clipboard-value-value="npm install stimulus-zag"
  class="space-y-1"
>
  <label data-part="label" class="text-sm font-medium">Install</label>
  <div data-part="control" class="flex max-w-sm">
    <input
      data-part="input"
      class="border-input bg-popover w-full rounded-l-lg border px-3 py-2 font-mono text-sm focus:outline-none"
    />
    <button
      data-part="trigger"
      class="border-input hover:bg-accent rounded-r-lg border border-l-0 px-4 py-2 text-sm font-medium"
    >
      <span data-part="indicator" class="data-[state=copied]:text-success">Copy</span>
    </button>
  </div>
</div>

Parts ​

root, label, control, input, trigger, indicator.

Values ​

AttributeTypeDefaultDescription
data-zag-clipboard-value-valueString""The text to copy.
data-zag-clipboard-timeout-valueNumber3000How long the copied state lasts (ms).

Events ​

Emits zag-clipboard:copy — detail is { copied }.

Programmatic control ​

copied (getter), value (getter), setValue(text), copy().