# Copy field (goodtabs UI)

A read-only mono value in a muted field with a copy button and an optional mask.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/copy-field.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/copy-field`

## Usage

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

<CopyField label="API key" value={apiKey} secret copyLabel="Copy API key" />
<CopyField value="https://ui.goodtabs.co" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value | `string` |  | The text shown and copied. |
| label | `string` |  | Optional label above the field. |
| secret | `boolean` | `false` | Mask the value with dots until revealed. |
| copyLabel | `string` | `"Copy"` | Accessible name for the copy button. |
| revealLabel | `string` | `"Show value"` | Accessible name for the reveal toggle while hidden. |
| timeout | `number` | `2000` | How long the check mark stays, in ms. |

## When to use

- API keys, tokens, webhook URLs and ids in settings pages
- Install commands and share links that people copy more than they read
- Anywhere a value is read only but should still be selectable

## When not to use

- Editable values, use an input with a copy button next to it
- Multi-line content such as a config file, use a code block
- When the value must never be shown, keep it server side and offer a rotate action instead

## Notes for agents

- No functions are taken, so server components can render it; the file itself is a client component
- Secrets start masked and the reveal toggle has aria-pressed; copy always writes the full value
- The input is readOnly and focus selects it, so people can also copy by hand
- Clipboard writes need a secure context (https or localhost); failures are silent by design

Docs: https://ui.goodtabs.co/components/copy-field