Search for a command to run...
A read-only `Input` with a copy-to-clipboard button pinned inside. Use anywhere a user needs to grab a generated string — share links, API keys, embed codes, webhook URLs, magic links.
The trailing button copies via navigator.clipboard.writeText, fires a success toast, and swaps to a check icon for copiedTimeoutMs (default 1500ms). On failure (e.g., insecure context) it shows an error toast. Pass label for any non-share use case so screen readers don't announce "Shareable URL" for an API key.
| Prop | Type | Default | Description |
|---|---|---|---|
url | string | — | The string to display and copy. |
label | string | "Shareable URL" | Accessible label applied to both the input's aria-label and the copy button (Copy {label} / {label} copied). Override for "API key", "Embed code", "Webhook URL". |
onCopy | () => void | — | Fires after a successful copy. Useful for analytics or driving a parent state. |
copiedTimeoutMs | number | 1500 | How long the check icon stays visible after a copy before reverting to the copy icon. |
className | string | — | Classes applied to the outer wrapper. |
Pair with Dialog / DetachedSheet for share UIs — CopiableUrl is the "grab the link" affordance inside a share dialog, not a standalone surface.
Override label for non-share use cases. The default "Shareable URL" is fine for share dialogs; everywhere else (API keys, embed snippets, webhook URLs) deserves a specific label.
Pass onCopy when you need to track copy events — funnel analytics, "shared" timestamp, or driving a sibling component's state.
Wrap a long body of text in CopiableUrl. It's sized for a single line — for paragraphs or code blocks, compose your own copy button against a Textarea or <pre>.
Roll your own copy-to-clipboard input. CopiableUrl already handles the clipboard API failure case (insecure contexts, permission denial) and the icon swap animation.