Skip to main content
Fluid Primitives

Clipboard

A component to copy text to the clipboard

View Sourcefor Clipboard componentZag.js Docsfor Clipboard component
Example.html
<primitives:clipboard.root value="Hello World!">
    <primitives:clipboard.label class="text-sm leading-none font-medium select-none">
        Copy to clipboard
    </primitives:clipboard.label>
    <primitives:clipboard.control class="flex gap-2">
        <primitives:clipboard.input class="{ui:cn(value: '
            placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input h-8 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none md:text-sm
            focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]
            aria-invalid:ring-destructive/20 aria-invalid:border-destructive
        ')}" />
        <primitives:clipboard.trigger asChild="{true}">
            <ui:button>
                <primitives:clipboard.indicator state="idle">Copy</primitives:clipboard.indicator>
                <primitives:clipboard.indicator state="copied">Copied!</primitives:clipboard.indicator>
            </ui:button>
        </primitives:clipboard.trigger>
    </primitives:clipboard.control>
</primitives:clipboard.root>

<vite:asset entry="EXT:fluid_primitives/Resources/Public/JavaScript/dist/clipboard.entry.js" />

Installation

typo3 ui:add clipboard

Read more about installing Components and Primitives.

Usage

<ui:clipboard.root value="Text to copy">
    <ui:clipboard.label>Copy to clipboard</ui:clipboard.label>
    <ui:clipboard.control>
        <ui:clipboard.input />
        <ui:clipboard.trigger>
            <ui:clipboard.indicator state="idle">Copy</ui:clipboard.indicator>
            <ui:clipboard.indicator state="copied">Copied!</ui:clipboard.indicator>
        </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>