Css Zero Showcase
x
1
2
3
4
5
6
7
8
<div class="input input--actor flex items-center gap" data-controller="copyable-input">
  <input type="text" name="copyable_input" id="copyable_input" value="54qrKuFvUAErKUAtiJvX8S9AcDAJCojX" readonly="readonly" data-copyable-input-target="input" />
  <button type="button" class="btn btn--plain" data-action="copyable-input#copy">
    <img hidden="hidden" aria-hidden="true" data-copyable-input-target="copyIcon" src="/assets/copy-6b663b6e.svg" width="20" height="20" />
    <img hidden="hidden" aria-hidden="true" data-copyable-input-target="successIcon" src="/assets/check-f9df2b62.svg" width="20" height="20" />
    <span class="sr-only">Copy to clipboard</span>
  </button>
</div>
1
2
3
4
5
6
7
8
<div class="input input--actor flex items-center gap" data-controller="copyable-input">
  <%= text_field_tag "copyable_input", SecureRandom.base58(32), readonly: "readonly", data: { copyable_input_target: "input" } %>
  <button type="button" class="btn btn--plain" data-action="copyable-input#copy">
    <%= image_tag "copy.svg",  hidden: true, size: 20, aria: { hidden: true }, data: { copyable_input_target: "copyIcon" } %>
    <%= image_tag "check.svg", hidden: true, size: 20, aria: { hidden: true }, data: { copyable_input_target: "successIcon" } %>
    <span class="sr-only">Copy to clipboard</span>
  </button>
</div>
CSS is not required or multiple files are needed, check the notes.
Java Script is not required or multiple files are needed, check the notes.

The javascript is avilable at copyable_input_controller.js