# `PhiaUi.Components.CopyInput`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/inputs/copy_input.ex#L1)

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>)} />

# `copy_input`

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 to `nil`.
* `value` (`:string`) (required) - The value to display and copy.
* `label` (`:string`) - Label text rendered above the input group. Defaults to `nil`.
* `description` (`:string`) - Helper text rendered below the label. Defaults to `nil`.
* `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`, or `lg`. Defaults to `"default"`. Must be one of `"sm"`, `"default"`, or `"lg"`.
* `class` (`:string`) - Additional CSS classes applied to the outer wrapper. Defaults to `nil`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*