InputCopy

A read-only input with an integrated copy button. Composes Input and CopyButton internally.

Import

import { InputCopy } from "chunks-ui";

Basic Usage

<InputCopy value="https://vibekanban.com/invite/abc123" aria-label="Invite link" />

Editable

The input is read-only by default (readOnly defaults to true). To let users edit the value, pass readOnly={false} and control value with onChange. The button copies the current value:

function EditableInputCopy() {
  const [value, setValue] = useState("PROMO-2024-SUMMER");
 
  return (
    <InputCopy
      value={value}
      onChange={(e) => setValue(e.target.value)}
      readOnly={false}
      aria-label="Promo code"
    />
  );
}

Props

All other Input props are forwarded except endAdornment and onClear (reserved for the internal CopyButton). readOnly defaults to true. aria-label names the input, not the copy button.

The text of the field is 16px below md (768px by default) and on a touch screen, and 14px otherwise, as in Input. A string className goes on the wrapper, not the input; a function reaches the input. See Text Size in Input.

Labels

labels replaces the built-in English text, for example to translate it. Keys you leave out keep their default from DEFAULT_INPUT_COPY_LABELS. They name the copy button, which reads “Copied” for a moment after a copy. See Labels.