Clipboard
Introduction
The Clipboard component is a readonly text container paired with a copy-to-clipboard action trigger. It features responsive, built-in visual indicator status changes (copied/not-copied states) to provide immediate feedback to users copying terminal commands, API keys, tokens, or links.
The Clipboard is fully integrated as a clipboard block in the Page Builder, allowing content authors and developers to easily configure descriptive labels, copy values, action timeouts, and color themes directly within the CMS.
Usage
These examples illustrate how content editors bind and structure copy-to-clipboard elements.
1. Standard Code Clone Command
A standard terminal code or Git clone command snippet accompanied by a visual copy trigger.
{
"type": "clipboard",
"label": "Clone Command",
"value": "git clone https://github.com/honojs/honox",
"interactive": true
}
2. API Key Clipboard with Custom Timeout (Purple Theme)
Demonstrates a custom colored platform configuration with a faster, custom state reset timeout set to 1500 milliseconds.
{
"type": "clipboard",
"label": "Production API Key",
"value": "pk_live_51HxF4pE2",
"colorPalette": "purple",
"timeout": 1500,
"interactive": true
}
3. Compact Readonly Configuration
Ideal for embedding compact URLs or system IDs in tight dashboard sidebars or compact metadata layouts.
{
"type": "clipboard",
"label": "Endpoint URL",
"value": "https://api.acme.com/v1/deploy",
"size": "sm",
"interactive": true
}
Props
| Property | CMS Field Type | Default | Description / Supported Options |
|---|---|---|---|
Label Text (label) | string | - | The visual text heading rendered directly above the readonly input field. |
Copy Value (value) | string | - | The actual text value copied to the user's system clipboard upon trigger click. |
Timeout delay (timeout) | number | 3000 | Duration in milliseconds that the visual "Copied" checkmark state remains active before reverting. |
Color Theme (colorPalette) | select | "green" | Visual color accent applied to the copy trigger when toggled to active. • Options: blue, green, red, purple, orange, amber, cyan, slate. |
Size Scale (size) | select | "md" | Controls overall height, padding, and text scale. • Options: "sm", "md", "lg". |
Force Interactive (interactive) | boolean | true | Ensures client-side hydration as a Preact interactive island so click actions trigger instant copying. |
Developer Notes & Accessibility
- Accessible Label & State Announcements: Under the hood, this component handles screen reader accessibility natively:
- The copy button trigger receives localised
aria-labelupdates (swapping between"Copy to clipboard"/"Copied to clipboard"), ensuring screen readers announce status changes immediately.
- The copy button trigger receives localised
- Select-on-Focus & Readonly Inputs: The input field remains focusable (
readOnlyrather thandisabled). When focused, it automatically selects its complete inner text so keyboard users can manually copy contents usingCtrl+CorCmd+C. - Active State Markers: A
data-copiedattribute is dynamically mirrored onto the outer container and all descendant parts when active, facilitating custom CSS styling during copying.