Copy-paste field
←Here is the scenario: You want your user to display something to copy/paste. I found readonly text inputs most usable for this, as you can asure that no white space characters are copied accidentally.
The text-helper text-select-all should select the inputs contents by click/touch, but it only seems to work with Safari that way, so I have cheated a little JS in there. For longer multi-line values a textarea will work the same way. Here the long text string is cropped.
SCSS:
_forms.scss
_form-box.scss
copy/paste
<div class="form-box pa_m read_m">
<label class="mini-label required">API key</label>
<input onClick="this.select();" type="text" class="input text-select-all text-clip" value="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" readonly>
<div class="mini-info shown">copy/paste</div>
</div>