# Copy Field

A read-only monospace value with a copy button.

Source: [copy-field.tsx](https://github.com/jakejarvis/jarvis-ui/blob/main/src/components/ui/copy-field.tsx)

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

export default function CopyFieldBasic() {
  return (
    <CopyField label="Invite link" value="https://example.com/invite/7f3a9c" className="max-w-sm" />
  );
}
```

## Installation

Add the registry, once per project:

```bash
npx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json
```

Then add the component:

```bash
npx shadcn@latest add @jarvis/copy-field
```

## Usage

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

export function ApiKey() {
  return <CopyField label="API key" value="pk_live_51HcK2vQx8" />;
}
```

Long values scroll sideways. The button confirms the copy, including to screen readers.

## Examples

### Without a label

Leave out `label` when the context makes it clear.

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

export default function CopyFieldWithoutLabel() {
  return <CopyField value="git clone https://example.com/acme/website.git" className="max-w-sm" />;
}
```

### Copying on click

`copyOnClick` copies when anywhere in the row is clicked, as long as no text in it is selected. The
button still copies from the keyboard.

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

export default function CopyFieldCopyOnClick() {
  return (
    <CopyField value="pnpm dlx shadcn@latest add @jarvis/button" copyOnClick className="max-w-sm" />
  );
}
```

### Confirming a copy

`onCopy` runs after the value is copied, such as to show a toast.

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

export default function CopyFieldOnCopy() {
  return (
    <CopyField
      label="Install"
      value="pnpm dlx shadcn@latest add @jarvis/button"
      onCopy={() => toast.add({ title: "Copied to clipboard" })}
      className="max-w-sm"
    />
  );
}
```

### Copy button

To copy a value shown some other way, use [Copy Button](https://ui.jarv.is/components/copy-button.md) on its own.

## Props

`CopyField` takes the props of a `<div>`.

| Part | Extends |
| --- | --- |
| `CopyField` | `<div>` |

### CopyField

| Prop           | Type                        | Description                                                                                              |
| -------------- | --------------------------- | -------------------------------------------------------------------------------------------------------- |
| `children?`    | `React.ReactNode`           | Shown in place of `value`, such as the same text with its parts colored. `value` is still what's copied. |
| `value`        | `string`                    | The text shown and copied, such as a command or a key.                                                   |
| `label?`       | `React.ReactNode`           | Optional small label above the row.                                                                      |
| `icon?`        | `React.ReactNode`           | Optional icon before the value, such as a terminal prompt for a command.                                 |
| `copyOnClick?` | `boolean`                   | Copies when anywhere in the row is clicked, not only the button. Default: `false`                        |
| `timeout?`     | `number`                    | How long the copied or failed state lasts, in ms.                                                        |
| `onCopy?`      | `((value: string) => void)` |                                                                                                          |