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="udDdAFVdW7RK8btuApb3SN6daQRoYtXo" readonly="readonly" data-copyable-input-target="input" />
<button class="btn btn--plain" data-action="copyable-input#copy">
<img aria-hidden="true" data-copyable-input-target="copyIcon" hidden="hidden" src="/assets/copy-6b663b6e.svg" width="20" height="20" />
<img aria-hidden="true" data-copyable-input-target="successIcon" hidden="hidden" 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 class="btn btn--plain" data-action="copyable-input#copy">
<%= image_tag "copy.svg", size: 20, aria: { hidden: true }, data: { copyable_input_target: "copyIcon" }, hidden: true %>
<%= image_tag "check.svg", size: 20, aria: { hidden: true }, data: { copyable_input_target: "successIcon" }, hidden: true %>
<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.