Clipboard

A component to copy text to the clipboard.

Copy to clipboard

<ui:clipboard.root value="composer require jramke/fluid-primitives">
    <ui:clipboard.label>Copy to clipboard</ui:clipboard.label>
    <ui:clipboard.control class="flex items-center gap-2">
        <ui:clipboard.input class="field-sizing-content" />
        <ui:clipboard.trigger asChild="{true}">
            <ui:button>
                <ui:clipboard.indicator state="idle">Copy</ui:clipboard.indicator>
                <ui:clipboard.indicator state="copied">Copied!</ui:clipboard.indicator>
            </ui:button>
        </ui:clipboard.trigger>
    </ui:clipboard.control>
</ui:clipboard.root>

import { mount } from 'fluid-primitives';
import { Clipboard } from 'fluid-primitives/clipboard';

mount('clipboard', ({ props }) => {
	const clipboard = new Clipboard(props);
	clipboard.init();
	return clipboard;
});

Features

Supports copying text to the clipboard
Visual feedback when copying is successful
Supports custom timeout for the copied state

Installation

typo3 ui:add clipboard

Read more about installing Components and Primitives.

Examples

Copy Button Only

Display only a copy button without the input field.

<ui:clipboard.root value="https://example.com/share/abc123">
    <ui:clipboard.trigger>
        <ui:clipboard.indicator state="idle">Copy Link</ui:clipboard.indicator>
        <ui:clipboard.indicator state="copied">Link Copied!</ui:clipboard.indicator>
    </ui:clipboard.trigger>
</ui:clipboard.root>

Custom Timeout

Set a custom duration for how long the "copied" state is shown.

<ui:clipboard.root value="Copy me!" timeout="5000">
    <ui:clipboard.control class="flex items-center gap-2">
        <ui:clipboard.input class="w-32" />
        <ui:clipboard.trigger asChild="{true}">
            <ui:button>
                <ui:clipboard.indicator state="idle">Copy</ui:clipboard.indicator>
                <ui:clipboard.indicator state="copied">Copied for 5 seconds!</ui:clipboard.indicator>
            </ui:button>
        </ui:clipboard.trigger>
    </ui:clipboard.control>
</ui:clipboard.root>

Anatomy

<primitives:clipboard.root>
    <primitives:clipboard.label />
    <primitives:clipboard.control>
        <primitives:clipboard.input />
        <primitives:clipboard.trigger>
            <primitives:clipboard.indicator />
        </primitives:clipboard.trigger>
    </primitives:clipboard.control>
</primitives:clipboard.root>