x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <!-- Introductory callout --> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>COPY BUTTON:</strong> Clipboard-copy affordance with a success flash<br> <strong>VARIANTS:</strong> Reference number | URL share </p> <p class="tw:mb-0 tw:text-sm"> <code>.btn-copy</code> composes <code>.btn .btn-icon .btn-outline-secondary</code> — it adds nothing but the success-state colour. <code>data-controller="copy"</code> writes the paired value to the clipboard, then flashes the button green with a check icon for two seconds and announces "Copied" to screen readers. </p> </div> <!-- Section 1: Reference number --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Reference Number</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Reference number:</strong> Pairs with a read-only <code>.form-control</code> via <code>data-copy-target="source"</code> — the button reads the input's live <code>value</code>, not a static string, so the same markup works no matter what the reference number actually is. </p> </div> <div class="tw:max-w-md"> <label class="form-label" for="copy-ref">Application reference</label> <div class="input-group" data-controller="copy"> <input type="text" class="form-control" id="copy-ref" value="REF-2026-004821" readonly data-copy-target="source"> <button type="button" class="btn btn-outline-secondary btn-icon btn-copy" aria-label="Copy reference number" data-copy-target="button" data-action="click->copy#copy"> <i class="fa-regular fa-copy" aria-hidden="true" data-copy-target="icon"></i> </button> <span class="tw:sr-only" aria-live="polite" data-copy-target="status"></span> </div> <p class="form-text tw:mt-1">Quote this reference when contacting admissions.</p> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="input-group" data-controller="copy"></code><br> <code> <input class="form-control" value="REF-2026-004821" readonly data-copy-target="source"></code><br> <code> <button class="btn btn-outline-secondary btn-icon btn-copy" aria-label="Copy reference number"</code><br> <code> data-copy-target="button" data-action="click->copy#copy"></code><br> <code> <i class="fa-regular fa-copy" aria-hidden="true" data-copy-target="icon"></i></code><br> <code> </button></code><br> <code> <span class="tw:sr-only" aria-live="polite" data-copy-target="status"></span></code><br> <code></div></code> </div> </div> <!-- Section 2: URL share --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">URL Share</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>URL share:</strong> Same markup pattern for a shareable link. Try it — click the button to see the flash: <code>.is-copied</code> tints the button with the state-success trio and the icon swaps <code>fa-regular fa-copy</code> → <code>fa-solid fa-check</code> for two seconds, then reverts. </p> </div> <div class="tw:max-w-md"> <label class="form-label" for="copy-url">Share link</label> <div class="input-group" data-controller="copy"> <input type="text" class="form-control" id="copy-url" value="https://applicaaone.com/schools/oakwood-primary" readonly data-copy-target="source"> <button type="button" class="btn btn-outline-secondary btn-icon btn-copy" aria-label="Copy share link" data-copy-target="button" data-action="click->copy#copy"> <i class="fa-regular fa-copy" aria-hidden="true" data-copy-target="icon"></i> </button> <span class="tw:sr-only" aria-live="polite" data-copy-target="status"></span> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> Same <code>data-controller="copy"</code> contract — only the source input's value differs. </div> </div> <!-- Quick Reference --> <div class="tw:border-t tw:pt-6"> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-semibold">Quick Reference</p> <p class="tw:mb-0 tw:text-xs tw:font-mono"> <strong>Base:</strong> .btn-copy (composes .btn .btn-icon .btn-outline-secondary)<br> <strong>Success flash:</strong> .is-copied (state-success trio, applied by the controller for 2s)<br> <strong>Controller:</strong> data-controller="copy" | data-copy-target="source|button|icon|status" | click->copy#copy<br> <strong>Fallback:</strong> execCommand("copy") when the async Clipboard API is unavailable; a failed copy announces a manual-copy message via the status region instead of throwing </p> </div> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <!-- Introductory callout --> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>COPY BUTTON:</strong> Clipboard-copy affordance with a success flash<br> <strong>VARIANTS:</strong> Reference number | URL share </p> <p class="tw:mb-0 tw:text-sm"> <code>.btn-copy</code> composes <code>.btn .btn-icon .btn-outline-secondary</code> — it adds nothing but the success-state colour. <code>data-controller="copy"</code> writes the paired value to the clipboard, then flashes the button green with a check icon for two seconds and announces "Copied" to screen readers. </p> </div> <!-- Section 1: Reference number --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Reference Number</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Reference number:</strong> Pairs with a read-only <code>.form-control</code> via <code>data-copy-target="source"</code> — the button reads the input's live <code>value</code>, not a static string, so the same markup works no matter what the reference number actually is. </p> </div> <div class="tw:max-w-md"> <label class="form-label" for="copy-ref">Application reference</label> <div class="input-group" data-controller="copy"> <input type="text" class="form-control" id="copy-ref" value="REF-2026-004821" readonly data-copy-target="source"> <button type="button" class="btn btn-outline-secondary btn-icon btn-copy" aria-label="Copy reference number" data-copy-target="button" data-action="click->copy#copy"> <i class="fa-regular fa-copy" aria-hidden="true" data-copy-target="icon"></i> </button> <span class="tw:sr-only" aria-live="polite" data-copy-target="status"></span> </div> <p class="form-text tw:mt-1">Quote this reference when contacting admissions.</p> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="input-group" data-controller="copy"></code><br> <code> <input class="form-control" value="REF-2026-004821" readonly data-copy-target="source"></code><br> <code> <button class="btn btn-outline-secondary btn-icon btn-copy" aria-label="Copy reference number"</code><br> <code> data-copy-target="button" data-action="click->copy#copy"></code><br> <code> <i class="fa-regular fa-copy" aria-hidden="true" data-copy-target="icon"></i></code><br> <code> </button></code><br> <code> <span class="tw:sr-only" aria-live="polite" data-copy-target="status"></span></code><br> <code></div></code> </div> </div> <!-- Section 2: URL share --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">URL Share</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>URL share:</strong> Same markup pattern for a shareable link. Try it — click the button to see the flash: <code>.is-copied</code> tints the button with the state-success trio and the icon swaps <code>fa-regular fa-copy</code> → <code>fa-solid fa-check</code> for two seconds, then reverts. </p> </div> <div class="tw:max-w-md"> <label class="form-label" for="copy-url">Share link</label> <div class="input-group" data-controller="copy"> <input type="text" class="form-control" id="copy-url" value="https://applicaaone.com/schools/oakwood-primary" readonly data-copy-target="source"> <button type="button" class="btn btn-outline-secondary btn-icon btn-copy" aria-label="Copy share link" data-copy-target="button" data-action="click->copy#copy"> <i class="fa-regular fa-copy" aria-hidden="true" data-copy-target="icon"></i> </button> <span class="tw:sr-only" aria-live="polite" data-copy-target="status"></span> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> Same <code>data-controller="copy"</code> contract — only the source input's value differs. </div> </div> <!-- Quick Reference --> <div class="tw:border-t tw:pt-6"> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-semibold">Quick Reference</p> <p class="tw:mb-0 tw:text-xs tw:font-mono"> <strong>Base:</strong> .btn-copy (composes .btn .btn-icon .btn-outline-secondary)<br> <strong>Success flash:</strong> .is-copied (state-success trio, applied by the controller for 2s)<br> <strong>Controller:</strong> data-controller="copy" | data-copy-target="source|button|icon|status" | click->copy#copy<br> <strong>Fallback:</strong> execCommand("copy") when the async Clipboard API is unavailable; a failed copy announces a manual-copy message via the status region instead of throwing </p> </div> </div></div>No notes provided.
No params configured.