For AI agents: the complete documentation index is available at /ooui-react/en/llms.txt, the full documentation bundle is available at /ooui-react/en/llms-full.txt, and this page is available as Markdown at /ooui-react/en/components/copy-text-layout/index.md.
ooui-react
  • English

      • CopyTextLayout

      Source | Original component

      A copy-text layout: a read-only field with a copy button; the text is selected automatically when the field gains focus or the button is clicked. Suits read-only content the user needs to copy — links, embed codes and the like.

      Basic usage

      copyText is the text to copy (the field's initial value); onCopyResult fires when the copy attempt ends, with whether it succeeded.

      Copy
      import { useState } from "react";
import { CopyTextLayout } from "ooui-react";

function App() {
  const [result, setResult] = useState("");

  return (
    <div style={{ maxWidth: 460 }}>
      <CopyTextLayout
        label="Invite link"
        copyText="https://example.com/invite/9f3k"
        onCopyResult={(copied) => setResult(copied ? "Copied" : "Copy failed")}
      />
      <div style={{ marginTop: 8 }}>{result}</div>
    </div>
  );
}

export default App;

      Dynamic text

      copyText serves only as the field's initial value, and what gets copied is the field's current value. For share links that change with the user's choices, pass the controlled value via textInputProps={{ value }} (it wins over copyText) — updating copyText alone won't refresh the field.

      Copy
      New link
      import { useState } from "react";
import { Button, CopyTextLayout } from "ooui-react";

function App() {
  const [id, setId] = useState("9f3k");

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8, maxWidth: 460 }}>
      <CopyTextLayout label="Invite link" textInputProps={{ value: `https://example.com/invite/${id}` }} />
      <Button onClick={() => setId(Math.random().toString(36).slice(2, 6))}>New link</Button>
    </div>
  );
}

export default App;

      Multiline

      multiline switches the field to the multi-line form and moves the copy button below, aligned right.

      Copy
      import { CopyTextLayout } from "ooui-react";

function App() {
  return (
    <div style={{ maxWidth: 460 }}>
      <CopyTextLayout
        label="Embed code"
        multiline
        copyText={"<script src=\"https://example.com/widget.js\"></script>"}
        textInputProps={{ rows: 3 }}
      />
    </div>
  );
}

export default App;
      Differences from OOUI

      Copying prefers navigator.clipboard, falling back to document.execCommand('copy') when unavailable or permission-denied (the original uses only the latter, a deprecated API that fails silently).

      API

      Inherits all FieldLayout props (label / align / title, etc.), plus:

      PropDescriptionTypeDefault
      copyTextThe text to copy (the field's initial value; textInputProps.value wins when given)string—
      multilineWhether multi-line (uses MultilineTextInput, button moves below-right)booleanfalse
      textInputPropsField props override: value is the controlled value, readOnly defaults to true, the rest pass through (inputRef is taken by the layout)CopyTextLayoutTextInputProps—
      buttonPropsCopy-button props override (children is the button text, icon defaults to 'copy')Partial<ButtonProps>—
      onCopyResultCopy-finished callback with whether it succeeded(copied: boolean) => void—

      See also