Copy field
A read-only value with an integrated copy action, pending feedback and a retryable clipboard error.
Share a reference
Copy this reference into your project notes.
Implementation
1"use client";2 3import { useId, useRef, useState, type InputHTMLAttributes } from "react";4import { Check, Copy, LoaderCircle } from "lucide-react";5 6export type CopyFieldProps = Omit<7 InputHTMLAttributes<HTMLInputElement>,8 | "type"9 | "value"10 | "defaultValue"11 | "onChange"12 | "onCopy"13 | "readOnly"14 | "children"15> & {16 label: string;17 value: string;18 description?: string;19 copyLabel?: string;20 onCopy?: (value: string) => void | Promise<void>;21};22 23/** A read-only value with an explicit clipboard action and retryable feedback. */24export function CopyField({25 label,26 value,27 description,28 copyLabel = "Copy",