Form Components

Clipboard

Cyber Week Mega Offer!

Huge discounts on all Hostinger plans

Use our referral link for an extra 20% off!

# Basic usage

<x-clipboard content="Copied text" />

# Customize clipboard

You can set the default icon using the icon attribute, change the icon displayed after copying with copied-icon, show a custom success message using copied-text, and adjust the duration of the copied state with the timeout option.

<x-clipboard
    content="12345"
    icon="document"
    copied-icon="document-check"
    copied-text="Text copied!"
    timeout="5000"
/>

# Events

You can trigger custom JavaScript logic using Alpine.js events. The x-on:copy event is fired when the content is successfully copied, allowing you to display a custom alert or any other interaction. The x-on:copy-error event is triggered if the copy action fails, enabling error handling.

<x-clipboard
    content="12345"
    x-on:copy="alert(`✅ Copied: ${$event.detail.text}`)"
    x-on:copy-error="alert(`Error: ${$event.detail.error}`)"
/>