SecretInput

Guidelines#

Use it for workspace credentials (supplier API keys, webhook secrets) — never the user's own password.

What you provide: id, value or defaultValue, secretLabel for the reveal button's accessible name ("Apollo API key"), and onSubmitSecret to connect on Enter. Pair it with a Label and a Connect button; tell people where the key is stored.

Anatomy: 36px, a key glyph at the left (padding 36px), the eye toggle at the right, font-mono with slight tracking so key prefixes stay readable.

Facts#

API#

TypeScript declarations emitted from src/components/ui/secret-input.tsx (the module also exports its other parts).

interface SecretInputProps extends Omit<React.ComponentProps<"input">, "type" | "ref"> {
    /** Called when the user presses Enter — usually the same handler as Connect. */
    onSubmitSecret?: () => void;
    /** Accessible name for the reveal toggle (defaults to "API key"). */
    secretLabel?: string;
}
export declare function SecretInput({ className, onSubmitSecret, onKeyDown, secretLabel, disabled, ...props }: SecretInputProps): any;

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
  return h("div", { className: "flex flex-col gap-2 max-w-md" },
    h(DC.Label, { htmlFor: "sk" }, "Apollo API key"),
    h("div", { className: "flex gap-2" },
      h(DC.SecretInput, { id: "sk", defaultValue: "ak_live_4f9b2c7e1d0a", secretLabel: "Apollo API key" }),
      h(DC.Button, null, "Connect")),
    h("p", { className: "text-sm text-muted-foreground" }, "Stored encrypted. Only workspace admins can change it."));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Forms#