# Copy Field

Read-only value you copy with one tap: the copy icon turns into a check and it confirms inline, no toast. Comes as a field, row or promo code, with masking; on phones it needs a clipboard package.

> Composed · Free · Forms & Inputs — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add copy-field
```

## Import

```tsx
import { useCopy, CopyField, CopyButton } from "@/components/ui/copy-field/copy-field";
```

## Variants

- `backup-codes` — Backup codes: `npx @lumioui/cli add copy-field-backup-codes`
- `iban` — Account details: `npx @lumioui/cli add copy-field-iban`
- `invite` — Invite link: `npx @lumioui/cli add copy-field-invite`
- `promo` — Promo code ticket: `npx @lumioui/cli add copy-field-promo`

## Props

### CopyField

| Prop | Type | Notes |
| --- | --- | --- |
| `value` | `string` | Copied verbatim. |
| `display?` | `string` | Shown instead of `value` (formatting only). |
| `label?` | `string` | Caption above the value (field / box) — also names the copy action for screen readers. |
| `description?` | `string` | Helper line under the field. |
| `appearance?` | `"field" | "inline" | "box"` | Default "field". |
| `mono?` | `boolean` | Monospaced value — codes, IBANs, keys. |
| `groupSize?` | `number` | Insert a space every n characters in the displayed value. |
| `truncate?` | `"middle" | "tail" | "none"` | Where a long value is cut. Default "middle" (keeps both ends of links and addresses). |
| `masked?` | `boolean` | Hide all but the last `maskVisible` characters until revealed. |
| `maskVisible?` | `number` | Characters left visible while masked. Default 4. |
| `copyLabel?` | `string` | — |
| `copiedLabel?` | `string` | — |
| `resetAfter?` | `number` | ms the copied state lasts. Default 1800. |
| `onCopy?` | `(value: string) => void` | — |
| `highlight?` | `number` | Bump to light the value as if it were just copied — e.g. every row  lighting in turn when a "Copy all" button copies the set. |
| `highlightDelay?` | `number` | ms before a `highlight` lights the value (row stagger). Default 0. |
| `disabled?` | `boolean` | — |
| `className?` | `string` | — |
| `valueClassName?` | `string` | — |

### CopyButton

| Prop | Type | Notes |
| --- | --- | --- |
| `value` | `string` | Copied verbatim. |
| `label?` | `string` | Default "Copy". |
| `copiedLabel?` | `string` | Default "Copied". |
| `variant?` | `"default" | "secondary"` | "default" — accent/ink pill; "secondary" — neutral pill. |
| `size?` | `"md" | "lg"` | md 44 · lg 52. Default "md". |
| `resetAfter?` | `number` | — |
| `onCopy?` | `(value: string) => void` | — |
| `disabled?` | `boolean` | — |
| `announcement?` | `string` | Spoken confirmation. Default "Copied". |
| `confirmAfter?` | `number` | ms between the copy and the button's confirmation — let what was  copied light up first (pair with CopyField `highlight`). Default 0. |
| `className?` | `string` | — |

## Icons rendered

- `copy` — /icons.html?i=copy
- `check` — /icons.html?i=check

Source: https://lumioui.com/components/copy-field