Skip to content

CopyField

A read-only value in an input-like well with a copy button, for the Switchboard URL and other values people paste elsewhere.

DataIsland

Examples

In a field

Inside a Field the label and hint are wired up from the Field id.

Paste this into your agent’s MCP settings.

Example
<Field id="trunk-url" label="Switchboard URL" hint="Paste this into your agent’s MCP settings.">
  <CopyField value="https://sb.example.dev/mcp/u_7f3k2" copyLabel="Copy URL" />
</Field>

Sizes and visible label

Without a Field, pass label for the accessible name. showCopyLabel puts the word next to the icon.

Example
<CopyField size="sm" value={url} label="Switchboard URL" />
<CopyField value={url} label="Switchboard URL" />
<CopyField size="lg" value={url} label="Switchboard URL" showCopyLabel />

CopyButton on its own

Pair it with the visible text it copies.

create_issue
Example
<InlineCode>create_issue</InlineCode>
<CopyButton text="create_issue" label="Copy tool name" />
<CopyButton text={url} label="Copy URL" showLabel variant="secondary" />

Usage

Usage
import { CopyField, CopyButton } from '@switchboard/ui'

<Field id="trunk-url" label="Switchboard URL">
  <CopyField value={trunk.url} copyLabel="Copy URL" />
</Field>

Props

Every component also takes mix, for css() and mixins applied after its own style.

CopyField

CopyField props
PropTypeDefaultDescription
value*string–The value shown and copied.
labelstring–Accessible name of the input when there is no surrounding Field.
copyLabelstring'Copy'Accessible name and tooltip of the copy button.
size'sm' | 'md' | 'lg''md'Control height.
idstring–Input id. Inside a Field it comes from the Field.
showCopyLabelboolean–Show the copy label next to the icon.

Also accepts every <div> attribute; they go on the wrapper, not the input.

CopyButton

CopyButton props
PropTypeDefaultDescription
text*string–What to copy.
labelstring'Copy'Accessible name, and the visible label with showLabel.
showLabelboolean–Show the label next to the icon. Otherwise it is the tooltip and aria-label.
variantButtonVariant'ghost'Same variants as Button.
size'sm' | 'md' | 'lg''sm'Same sizes as Button.

Island. Takes only these props.

Accessibility

  • The value is a real read-only <input>, so it can be focused, selected and copied by hand before JavaScript loads.
  • After copying, the button shows a check and "Copied" for 1.5 seconds and a polite live region says "Copied to clipboard".
  • If the clipboard is blocked, it falls back to a hidden textarea; if that fails too it says "Copy failed. Select the text and copy it."

Guidance

Do

  • Name the copy button after what it copies: "Copy URL", "Copy tool name".
  • Use a Field label when the value sits in a form.

Don’t

  • Show a secret in a CopyField; reveal it once with a secret input.
  • Use a CopyButton without the value visible next to it.