Components
CopyField
Read-only value with a one-click copy button — for API keys, URLs, and ids.
CopyField displays a value the user is meant to copy, not edit — API keys,
webhook URLs, invite links, database ids. Clicking the trailing button copies
value to the clipboard and swaps the icon to a checkmark briefly to confirm.
Pass displayValue to show a masked or formatted version while still copying
the real underlying value.
Example
Preview
API key
sk_live_8f21c0de4b71
Webhook URL
https://api.officina.dev/hooks/8f21
import { CopyField } from '@officina/ui';
<CopyField label="API key" value="sk_live_8f21c0de4b71" />
<CopyField
label="Webhook URL"
value="https://api.officina.dev/hooks/8f21"
truncate
monospace
/>API
| Prop | Type | Default | Description |
|---|---|---|---|
| value* | string | — | The exact string written to the clipboard. |
| copiedLabel | string | Copied | Accessible label/feedback shown right after copying. |
| copyLabel | string | Copy | Accessible label for the copy button before copying. |
| displayValue | ReactNode | — | Optional display override (e.g. masked or formatted). Defaults to `value`. |
| label | ReactNode | — | Field label rendered above the value. |
| monospace | boolean | true | Render the value in a monospace font. |
| size | enum | md | Control size. Defaults to `'md'`. |
| truncate | boolean | true | Truncate the displayed value with an ellipsis when it overflows. |