@rhc-shared-components/form-text-input-clipboard-copy

Text input clipboard copy component for certified technology apps

A Formik-compatible text input component with built-in clipboard copy functionality, designed for displaying and copying sensitive values like API keys, tokens, and other read-only or copyable text.

Install

npm install --save @rhc-shared-components/form-text-input-clipboard-copy

Usage

import { Formik, Form } from "formik";
import { FormTextInputClipboardCopy } from "@rhc-shared-components/form-text-input-clipboard-copy";

const MyForm = () => {
  return (
    <Formik
      initialValues={{ apiKey: "sk_test_abc123def456ghi789jkl012" }}
      onSubmit={(values) => console.log(values)}
    >
      <Form>
        <FormTextInputClipboardCopy
          name="apiKey"
          label="API Key"
          helperText="Click the copy button to copy this API key"
          isRequired
        />
      </Form>
    </Formik>
  );
};

Development

yarn dev      # Start dev server
yarn build    # Build library
yarn lint     # Check with Biome
yarn lint-fix # Auto-fix lint issues