Copyable Read-Only Field

FreeNew

A read-only input for values people need to copy (links, IDs, commands) with a Copy button that confirms in text and aria-live, selects everything on focus, and falls back when the clipboard is blocked. Use this when the value is for pasting elsewhere.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

label

value

copiedMessage

Guide and examples

When to use it

People copy a share link, an invite code, an install command or an ID and you want it to work in one press and be easy to select by hand too.

Do not use it when: Do not use it for secrets that should stay masked; use the credentials pattern.

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/copyable-readonly-field.json

Usage

import { CopyableReadOnlyField } from "@/components/copyable-readonly-field"

<CopyableReadOnlyField />

Props

Prop	Type	Default	Description
`label`	`string`	`Share link`	Visible label; also used in the button name.
`value`	`string`	sample link	What is shown and copied.
`copiedMessage`	`string`	`Link copied to the clipboard.`	Confirmation text.
`onCopy`	`(value) => void`	-	After a successful copy.

Accessibility

The input is readonly (focusable and selectable, unlike disabled) with a visible label; focusing it selects the whole value so a manual copy is one keystroke.
The button name includes what it copies ("Copy share link") and changes to "Copied"; the same message is in a polite live region. The check icon is decorative.
If the browser blocks the clipboard, the text is selected and the message explains the shortcut instead of failing silently.

Testing

The pattern ships with a Testing Library test (copyable-readonly-field.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

People copy a share link, an invite code, an install command or an ID and you want it to work in one press and be easy to select by hand too.

Do not use it when: Do not use it for secrets that should stay masked; use the credentials pattern.

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/copyable-readonly-field.json

Usage

import { CopyableReadOnlyField } from "@/components/copyable-readonly-field"

<CopyableReadOnlyField />

Props

Prop	Type	Default	Description
`label`	`string`	`Share link`	Visible label; also used in the button name.
`value`	`string`	sample link	What is shown and copied.
`copiedMessage`	`string`	`Link copied to the clipboard.`	Confirmation text.
`onCopy`	`(value) => void`	-	After a successful copy.

Accessibility

The input is readonly (focusable and selectable, unlike disabled) with a visible label; focusing it selects the whole value so a manual copy is one keystroke.
The button name includes what it copies ("Copy share link") and changes to "Copied"; the same message is in a polite live region. The check icon is decorative.
If the browser blocks the clipboard, the text is selected and the message explains the shortcut instead of failing silently.

Testing

The pattern ships with a Testing Library test (copyable-readonly-field.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.