Input Copy

A cross-platform React input component that includes a copy-to-clipboard button. Supports visibility toggle for sensitive data like API keys or tokens.

Installation

npm install @xsolla/xui-input-copy
# or
yarn add @xsolla/xui-input-copy

Demo

Basic Input Copy

import * as React from 'react';
import { InputCopy } from '@xsolla/xui-input-copy';

export default function BasicInputCopy() {
  return (
    <InputCopy
      value="sk_live_abc123xyz"
      onCopy={(val) => console.log('Copied:', val)}
    />
  );
}

With Label

import * as React from 'react';
import { InputCopy } from '@xsolla/xui-input-copy';

export default function LabeledInputCopy() {
  return (
    <InputCopy
      label="API Key"
      value="sk_live_abc123xyz789"
      onCopy={(val) => console.log('Copied:', val)}
    />
  );
}

Secure Text Entry

import * as React from 'react';
import { InputCopy } from '@xsolla/xui-input-copy';

export default function SecureInputCopy() {
  return (
    <InputCopy
      label="Secret Token"
      value="super_secret_token_12345"
      secureTextEntry={true}
      onCopy={(val) => console.log('Copied:', val)}
    />
  );
}

Editable Input Copy

import * as React from 'react';
import { InputCopy } from '@xsolla/xui-input-copy';

export default function EditableInputCopy() {
  const [value, setValue] = React.useState('editable-value');

  return (
    <InputCopy
      label="Editable Field"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      onCopy={(val) => console.log('Copied:', val)}
    />
  );
}

Anatomy

import { InputCopy } from '@xsolla/xui-input-copy';

<InputCopy
  value="text to copy"         // Value to display and copy
  onChange={handleChange}      // Change event handler
  onCopy={handleCopy}          // Callback after copying
  secureTextEntry={false}      // Hide text like password
  initialVisible={false}       // Initial visibility (when secure)
  size="md"                     // Size variant
  label="Label"                // Label above input
  disabled={false}             // Disabled state
  error={false}                // Error state
  errorMessage="Error"         // Error message text
/>

Examples

Input Copy Sizes

import * as React from 'react';
import { InputCopy } from '@xsolla/xui-input-copy';

export default function InputCopySizes() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <InputCopy size="xs" value="Extra Small" />
      <InputCopy size="sm" value="Small" />
      <InputCopy size="md" value="Medium" />
      <InputCopy size="lg" value="Large" />
      <InputCopy size="xl" value="Extra Large" />
    </div>
  );
}

Error State

import * as React from 'react';
import { InputCopy } from '@xsolla/xui-input-copy';

export default function ErrorInputCopy() {
  return (
    <InputCopy
      label="API Key"
      value="invalid-key"
      error={true}
      errorMessage="Invalid API key format"
    />
  );
}

API Reference

InputCopy

InputCopy Props:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | value | string | "" | Value to display and copy. | | onChange | (e: ChangeEvent) => void | - | Change event handler. | | onChangeText | (text: string) => void | - | Text change handler. | | onCopy | (value: string) => void | - | Callback when value is copied. | | secureTextEntry | boolean | false | Hide text like a password field. | | initialVisible | boolean | false | Initial visibility when secureTextEntry is true. | | size | "xl" \| "lg" \| "md" \| "sm" \| "xs" | "md" | Component size. | | label | string | - | Label above input. | | disabled | boolean | false | Disabled state. | | error | boolean | false | Error state. | | errorMessage | string | - | Error message text. | | placeholder | string | - | Placeholder text. | | testID | string | - | Test identifier. |

Behavior

• Copy Button: Shows checkmark icon briefly (2 seconds) after successful copy
• Visibility Toggle: When secureTextEntry is enabled, the eye icon reflects the current state:
  • Open eye (👁️) = Text is currently visible (type="text")
  • Closed eye (🙈) = Text is currently hidden (type="password")
  • This follows modern design system conventions (Material, Apple, Atlassian, Polaris)
• Uses browser Clipboard API for copying
• Error state shows red border and error message

Accessibility

• Copy button has aria-label that changes from "Copy to clipboard" to "Copied" after action
• Visibility toggle button has appropriate aria-label:
  • "Show text" when text is hidden
  • "Hide text" when text is visible
• Toggle button uses aria-pressed to indicate current visibility state
• Error messages linked via aria-describedby for screen reader context
• Labels properly linked via aria-labelledby when provided
• Input has aria-invalid when in error state
• Error messages use role="alert" for immediate announcement