CopyField

One-line values

import { CopyField } from '@rookcom/monarch-react';

<CopyField label="Webhook URL" value="https://example.com/hooks/inbound/7f3a2c" />
<CopyField label="TXT record" value="verify=c41e9b20d7" size="sm" iconOnly />

Usage examples

In a Field, multi-line

import { CopyField, Field, FieldDescription, FieldLabel } from '@rookcom/monarch-react';

const embed = `<script src="https://example.com/widget.js"
  data-workspace="ws_01HZX4" async></script>`;

<Field style={{ width: '100%', maxWidth: '36rem' }}>
  <FieldLabel>Embed code</FieldLabel>
  <CopyField label="Embed code" value={embed} multiline />
  <FieldDescription>Paste before the closing body tag.</FieldDescription>
</Field>

Purpose

Shows a value the user needs to take elsewhere (a webhook URL, a DNS record, an embed snippet, a calendar feed) in a read-only text box with a CopyButton beside it.

Use when

The user should see the value and copy it, for example while configuring another service.
The value is long or structured: multiline shows it in a text area.

Avoid when

The value is a secret: use SecretField, which masks it.
Only the button is needed and the value is shown elsewhere: use CopyButton.
The user should edit the value: use Input.

Design principles

The value is always selectable by hand: focus selects all of it, and a failed copy focuses and selects it.
One label names both parts: the text box ("Webhook URL") and the button ("Copy Webhook URL").
Works inside a Field, so a visible label, help text and errors are wired the usual way.
Monospace by default, because most copied values are codes, hosts or URLs.

API reference

import { CopyField } from '@rookcom/monarch-react';

Export	Kind	Rendering	Root class
`CopyField`	component	client	`.mn-copy-field`

Renders <div class="mn-copy-field"> (the ref) holding a read-only Input or Textarea and a CopyButton.

Inside a Field the control takes the Field id, description and error wiring from useFieldControl.

Generated from the TypeScript declarations of packages/react/src/components/actions/copy-field.

Properties

copyButtonProps passes extra props (for example variant) to the CopyButton.

`CopyField`

A read-only value with a copy button: webhook URLs, DNS records, embed snippets, calendar feed links. If copying fails, the value is focused and selected so the user can copy it by hand.

Prop	Type	Description
`label` required	`string`	What the value is ("Webhook URL"). Names the text box outside a Field (inside one, the FieldLabel does) and completes the copy button's name: "Copy webhook URL".
`value` required	`string`	The read-only value shown and copied.
`children`	`ReactNode`
`className`	`string`
`copiedLabel`	`string`	Visible text of the copy button after copying. Default "Copied".
`copyButtonProps`	`Omit<CopyButtonProps, "size" \| "value" \| "onCopy" \| "label" \| "target" \| "copiedLabel" \| "iconOnly" \| "resetAfter" \| "onCopyError">`	Extra props for the copy button, for example `variant`.
`copyLabel`	`string`	Visible text of the copy button. Default "Copy".
`disabled`	`boolean`
`iconOnly`	`boolean`	Show only the copy icon. The button is still named "Copy {label}". Default false.
`id`	`string`
`mono`	`boolean`	Monospace text for codes, keys, hostnames and DNS records. Default true.
`multiline`	`boolean`	Show the value in a multi-line text area (certificates, JSON, snippets).
`onCopy`	`((text: string) => void)`	Called with the copied text after a successful copy.
`onCopyError`	`((error: Error) => void)`	Called when copying fails. The value is selected first, so the user can copy it by hand; show a toast here if the product uses them.
`resetAfter`	`number`	Milliseconds before the button returns to its idle look. Default 2000.
`rows`	`number`	Visible rows when `multiline`. Default 3.
`selectOnFocus`	`boolean`	Select the whole value when the text box gets focus. Default true.
`size`	`ControlSize`

Variants

Prop	Values	Description
`multiline`	`'true''false'`	Text area (`rows`, default 3) instead of a one-line input (`data-multiline`).
`mono`	`'true''false'`	Monospace value (`data-mono`). Default true.
`size`	`'sm''md''lg'`	Input and button size. Default `md`.
`iconOnly`	`'true''false'`	Icon-only copy button for narrow layouts.

States

State	Exposed as	Behaviour
Read-only	`readonly`	The value can be selected but not changed.
Copied / error	`data-state on .mn-copy-field__button`	From CopyButton. On error the value is also focused and selected.
Disabled	`disabled`	Both the text box and the button are disabled.

Interaction behaviour

Focusing the text box selects the whole value (selectOnFocus, default true).
The copy button copies value and confirms like CopyButton.
If copying fails, the value is focused and selected, then onCopyError is called.

Keyboard support

Keys	Action
`Tab`	Focuses the text box (selecting the value), then the copy button.
`Ctrl/⌘ + C`	Copies the selected value by hand.
`Enter / Space`	On the button: copies the value.

Accessibility

Role: textbox (read-only) and button
Accessible name: Outside a Field, label is the text box aria-label; inside one, the FieldLabel. The button is named "Copy {label}".

The copy result is announced by CopyButton’s polite live region.
Read-only rather than disabled, so the value stays focusable and readable by screen readers.
Spell-check and autocomplete are off for the value.

Responsive behaviour

The text box shrinks to fit (min-width: 0); the button keeps its size, so it works at 320px.
Long one-line values are truncated visually but remain complete for selection and copying.
Multi-line values scroll inside the text area instead of wrapping.

Theme support

The read-only background is --mn-color-bg-subtle, so it reads as "not editable" in every theme.
All colours are Monarch tokens; more-contrast themes apply automatically.

Do and don't

Do

Give each field a specific label ("Calendar feed URL"), so its button is distinguishable.
Use mono={false} for prose, such as a message template.
Report onCopyError the way the product reports other errors.

Don't

Do not use CopyField for secrets.
Do not use it for values the user edits; it is read-only by design.

CopyButton: The button on its own.
SecretField: For keys and tokens that must be masked.
Input: The Input and Textarea it renders.
Field: Adds a visible label, help text and errors.

Dependencies

Kind	Depends on
npm packages	`react`
Monarch components	CopyButton, Field, Input

Testing coverage

Shows the value read-only and names the text box and button from label.
Copies the value with the button and announces it.
Selects the whole value on focus; Tab order is text box, then button.
On failure, focuses and selects the value and calls onCopyError.
Inside a Field, the FieldLabel names the text area.
Icon-only keeps a full accessible name; disabled disables both parts.

Check	Covered
Axe in jsdom	Yes
Server rendering	Yes
Browser suites	Visual baselines: /__gallery; Cross-browser axe: /components/copy-field

Tests: packages/react/src/components/actions/copy-field