Developer

API Key Field

Reveal, hide, and copy a key without losing context.

OSCL StudioComponents, in context.Live preview

FOUNDATION / DEVELOPER

API Key Field

API key

Fictional example. No real credentials.

Interactive preview. Real components.View docs

Use it in your project

Install oscl-ui from npm and import oscl-ui/styles.css once. See installation.

api-key-field-example.tsx

import { ApiKeyField } from "oscl-ui";

<ApiKeyField value="oscl_demo_not_a_real_key" description="Fictional example key." />

Accessibility

Keep visible labels and keyboard focus. Supply an accessible name to icon-only actions. Try this preview with Tab, Enter, Space, and Escape where appropriate.

The source, in full

This is the actual source from the isolated OSCL package used by this website. Native props and TypeScript declarations are included in the npm package.

api-key-field.tsx

"use client";

import { useState } from "react";
import type { HTMLAttributes } from "react";
import { Input } from "./input.js";
import { Button } from "./button.js";
import { CopyButton } from "./copy-button.js";

export interface ApiKeyFieldProps extends HTMLAttributes<HTMLDivElement> {
  value: string;
  label?: string;
  description?: string;
  disabled?: boolean;
}
export function ApiKeyField({ value, label = "API key", description, disabled, className = "", ...props }: ApiKeyFieldProps) {
  const [revealed, setRevealed] = useState(false);
  return <div {...props} className={`oscl-api-key ${className}`}>
    <Input label={label} value={value} type={revealed ? "text" : "password"} readOnly disabled={disabled} description={description} autoComplete="off" spellCheck={false} />
    <div className="oscl-api-key-actions">
      <Button variant="outline" size="sm" disabled={disabled} aria-label={`${revealed ? "Hide" : "Reveal"} ${label}`} aria-pressed={revealed} onClick={() => setRevealed(!revealed)}>{revealed ? "Hide" : "Reveal"}</Button>
      <CopyButton value={value} label={`Copy ${label}`} disabled={disabled} />
    </div>
  </div>;
}