# CopyField

> `CopyField` is part of the Forms set, imported from `@jcsoftdev/ui/forms`.

Source: https://ui.jcsoftdev.com/docs/components/copy-field

`CopyField` is part of the Forms set, imported from `@jcsoftdev/ui/forms`.

## Import

```ts
import { CopyField } from "@jcsoftdev/ui/forms";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/forms/copy-field`.

## Usage

```tsx
<CopyField
  label="URL del webhook"
  value="https://api.example.com/webhooks/9f2c1"
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` * | `ReactNode` |  |  |
| `value` * | `string` |  | Text shown in monospace and written to the clipboard. |
| `onCopy` | `((value: string) => void)` |  | Called after the value was copied. |
| `copyLabel` | `string` |  | Accessible name of the button; defaults to the UI string `copy`. |
| `copiedLabel` | `string` |  | Announced and shown on the button after copying; defaults to the UI string `copied`. |
| `classNames` | `Partial<Record<CopyFieldPart, string>>` |  | Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/forms-copyfield--default)
- [Spanish Labels](/storybook/?path=/story/forms-copyfield--spanish-labels)

## Source

`packages/ui/src/forms/copy-field/copy-field.tsx`