CLIPBOARD: Copy-to-clipboard controller composition — no CSS of its own
COMPOSES: Button (.tw-btn-icon) | Tooltip (optional) | Input Group (optional)
A button that copies a value and confirms three ways: icon swap to a check, an
aria-live announcement, and the button's own affordances. The controller was born in
the Enquiry Forms prototype, then promoted to a documented pattern and extended (DR-2026-12) —
the original param/source API is preserved. Live here — click to copy for real.
Inline: the standard dense-row shape — a tertiary-neutral icon button beside the value,
with aria-label naming what gets copied. The icon swaps to a check for 1.5s after copying.
APP-2026-0142
STU-88412
<button data-controller="clipboard" data-action="click->clipboard#copy" data-clipboard-value-param="APP-2026-0142" aria-label="Copy application reference"><i class="fa-regular fa-copy" data-clipboard-target="icon"></i></button>
Field: a read-only .tw-form-control plus a copy button in an
.tw-input-group. The field is the source target and the button calls
copySource, so the copied text always matches what's shown.
Families use this link to book an open day place.
<div class="tw-input-group" data-controller="clipboard"><input class="tw-form-control" readonly data-clipboard-target="source" …><button class="tw-btn tw-btn-secondary" data-action="click->clipboard#copySource">…</button></div>