1

Input Copy

A copy-to-clipboard field that shows a monospace value in a read-only input with an icon or button trigger, animating a checkmark on copy.

Dependencies

motion

Interaction Type

Click or press Enter on the copy button to copy the value with tactile audio feedback. The icon morphs into a checkmark and the result is announced to screen readers. Falls back to a legacy copy when the Clipboard API is unavailable.

Props

Options you can pass to customize this component.

Prop
Type
Description
value
string

The value to display and copy to clipboard.

label
string

Optional label displayed above the value.

onCopy
() => void

Called after the value is copied.

variant
"icon" | "button"

Icon-only with tooltip, or a labeled button. Defaults to "icon".

align
"right" | "left"

Position of the copy action relative to the value. Defaults to "right".

disabled
boolean

Disables copying.

copyLabel
string

Accessible label and tooltip for the icon trigger. Defaults to "Copy to clipboard".

copiedLabel
string

Text shown and announced after a successful copy. Defaults to "Copied".

failedLabel
string

Text announced when copying fails and the value is selected instead.

buttonText
string

Trigger text for the button variant. Defaults to "Copy".

resetDelay
number

Milliseconds before the copied state resets. Defaults to 2000.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/input-copy.json

How to use

import { InputCopy } from "@/components/ui/input-copy"

export function Demo() {
  return <InputCopy label="API Key" value="sk-proj-a1b2c3d4e5f6" variant="button" />
}

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

  • •Free for personal and commercial use
  • •No attribution required
  • •Cannot be resold as a standalone product
  • •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.
npx shadcn@latest addhttps://ui.nexvyn.dev/r/input-copy.json