Read-only input with an inline copy-to-clipboard button.
Provides copy_input/1 — a styled read-only text field designed to display
values that users need to copy: API keys, tokens, share links, embed codes,
and similar credentials or URLs.
The copy button uses the PhiaCopyButton JS hook (already bundled with
PhiaUI) which writes the input value to the clipboard and briefly shows a
"Copied!" confirmation.
Optional masking
Set :masked to true to render the value as ••••••••• dots. A toggle
button lets users reveal the actual value (uses JS.toggle_attribute — no
server round-trip).
Basic usage
<%!-- API key display --%>
<.copy_input
label="API Key"
value="sk-live-abc123def456"
masked={true}
/>
<%!-- Share link --%>
<.copy_input
label="Share link"
value="https://example.com/share/abc123"
/>
<%!-- Embed code --%>
<.copy_input value={~s(<script src="https://cdn.example.com/widget.js"></script>)} />Summary
Functions
Renders a read-only input with a copy-to-clipboard button.
Functions
Renders a read-only input with a copy-to-clipboard button.
The copy button is powered by the PhiaCopyButton JS hook which must be
registered in your app's hooks config:
// app.js
import { PhiaCopyButton } from "./hooks"
let liveSocket = new LiveSocket("/live", Socket, { hooks: { PhiaCopyButton } })Examples
<.copy_input label="API Key" value={@api_key} masked={true} />
<.copy_input label="Webhook URL" value={@webhook_url} />
<.copy_input value={@share_link} size="sm" />Attributes
id(:string) - HTML id for the<input>. Auto-generated if nil. Defaults tonil.value(:string) (required) - The value to display and copy.label(:string) - Label text rendered above the input group. Defaults tonil.description(:string) - Helper text rendered below the label. Defaults tonil.masked(:boolean) - When true, the input renders as password-type (showing •••••). A reveal button is shown to toggle visibility. The copy button always copies the real value regardless of masking.Defaults to
false.size(:string) - Input height —sm,default, orlg. Defaults to"default". Must be one of"sm","default", or"lg".class(:string) - Additional CSS classes applied to the outer wrapper. Defaults tonil.