Clipboard

A component that allows users to quickly copy text content to their clipboard with visual feedback.

Features

• ✅ One-click copy to clipboard
• ✅ Visual feedback with data attributes
• ✅ Optional input field for displaying content
• ✅ Accessible ARIA attributes

Installation

import Alpine from 'alpinejs'
import clipboard from 'alpine-headless-ui/clipboard'

Alpine.plugin(clipboard)
Alpine.start()

Examples

Basic Clipboard

With Input Field

Repository URL

With Icon Indicator

Installation Command

Custom Timeout

Code Snippet

JavaScript

API Reference

Component Props

Prop	Type	Default	Description
value	string	''	The text to copy to clipboard
timeout	number	3000	Duration in milliseconds before resetting copied state

Parts

Part	Description
x-clipboard:label	Label for the clipboard content
x-clipboard:control	Container for input and trigger button
x-clipboard:trigger	Button that triggers the copy action
x-clipboard:input	Input field displaying the text to be copied
x-clipboard:indicator	Optional indicator shown when content is copied

Data Attributes

Attribute	Description
data-scope	Always set to clipboard
data-part	Identifies the part (root, label, control, trigger, input, indicator)
data-copied	Present when text has been copied

Events

Event	Detail	Description
copy	{ value: string, copied: boolean }	Fired when text is successfully copied
copy-error	{ error: Error }	Fired when clipboard copy fails

Accessing State

You can access the clipboard API using $clipboard:

<div x-clipboard>
  <div x-data>
    <p x-text="$clipboard.copied ? 'Copied!' : 'Not copied'"></p>
  </div>
  <button x-clipboard:trigger>
  <!-- Parts -->
</div>

Accessing State

You can access the clipboard API using $clipboard:

<div x-clipboard="{ value: 'Hello' }">
  <div x-data>
    <p x-show="$clipboard.copied">Text copied!</p>
    <p x-text="$clipboard.value"></p>
  </div>

  <button x-clipboard:trigger>Copy</button>
</div>

Available properties:

• value - The text to copy
• copied - Whether text was recently copied
• timeout - Timeout duration in ms
• setValue(value) - Update the text value
• copy() - Trigger copy action programmatically

Accessibility

Best Practices

• Use descriptive labels for clipboard triggers
• Provide visual feedback when content is copied
• Consider using ARIA live regions for screen reader announcements
• Ensure keyboard accessibility for trigger buttons

Example with ARIA Live Region

<div x-clipboard="{ value: 'Text to copy' }">
  <button x-clipboard:trigger>Copy</button>

  <div role="status" aria-live="polite" aria-atomic="true">
    <span x-show="$clipboard.copied">Copied to clipboard</span>
  </div>
</div>

Browser Support

The clipboard component uses the modern Clipboard API. It requires:

• HTTPS (or localhost for development)
• Modern browsers with Clipboard API support
• User permission for clipboard access (automatic in most browsers)

Fallback

For older browsers, consider providing alternative copy methods or displaying the text for manual copying.

See Also

• Popover - Show helpful hints or feedback for clipboard buttons
• Collapsible - Show/hide additional information