Copyable field

Read-only field that displays a value with a copy action — API keys, run IDs, webhook URLs, model identifiers. Display-only: the value can be selected and copied, never edited.

Included in the single kansho full pack. Components are not offered as separate installs.

Types

text · secret · url · code

Run ID

API key

Webhook URL

Model ID

Status

Verified endpoint

Rotating soon

Invalid key

Locked

Component documentation

Copyable Field

components/inputs/copyable-field.tsx

Purpose

Displays a read-only value with copy, reveal, or open actions appropriate to its type.

Appropriate use

Use for URLs, code, and secrets that users need to transfer without editing in place.

Example

components/inputs/copyable-field.tsx has a representative live example in the "Types" section on /components/copyable-field.

States

Supports text, secret, url, and code types plus copied, revealed, disabled, and field-status states.

API and props

CopyableField accepts value, type, label, status, className, and ref.

Dependencies

React, Lucide icons, Field, the Clipboard API, native links for URLs, and the Kansho cn utility.

Accessibility

Labels the read-only field and every action, announces copy completion politely, exposes reveal state with aria-pressed, and removes disabled actions from tab order.

Limitations

Copy requires the browser Clipboard API; URL opening is available only for url type and callers must avoid exposing secrets by default.

Source

Source: components/inputs/copyable-field.tsx.

Full pack

components/inputs/copyable-field.tsx is documented at /components/copyable-field and installs only through the single Kansho full pack; no individual component install is offered.