Sensitive Input
A password or token field: masked by default, with a button that reveals it and an optional one that copies it.
<SensitiveInput aria-label="API token" defaultValue="sb_live_2f9a41c7" copyable mono />Props
Installation
npx shadcn@latest add https://sproutboat.com/ikada/r/sensitive-input.jsonThe CLI writes components/ikada/sensitive-input.tsx and merges the ikada theme into your CSS. It also installs the components it is built from: Icon Button, Inline Confirm and Input. Or take it from the package: import { SensitiveInput } from "@sproutboat/ikada";
Usage
import { SensitiveInput } from "@/components/ikada/sensitive-input";
<SensitiveInput aria-label="API token" defaultValue="sb_live_2f9a41c7" copyable mono />Examples
Shown once. Store it somewhere safe.
<Field label="API token" description="Shown once. Store it somewhere safe.">
<SensitiveInput defaultValue="sb_live_2f9a41c7" mono />
</Field><Field label="Webhook secret">
<SensitiveInput defaultValue="whsec_robin_8d31" mono copyable />
</Field><Field label="Deploy key">
<SensitiveInput defaultValue="sb_deploy_wren_c04e" defaultRevealed mono copyable />
</Field>Use at least 12 characters.
<Field label="Password" error="Use at least 12 characters.">
<SensitiveInput defaultValue="hunter2" autoComplete="new-password" />
</Field><Field label="API token">
<SensitiveInput defaultValue="sb_live_2f9a41c7" mono disabled />
</Field>Props
| Prop | Type | Description |
|---|---|---|
| copyable | boolean | Shows a copy button. It copies the real value even while it is masked. Default `false`. |
| defaultRevealed | boolean | Starts revealed. Default `false`. |
| revealLabel | string | Accessible names of the two buttons. Default `Show value`. |
| hideLabel | string | Accessible name of the hide button. Default "Hide value". |
| copyLabel | string | Accessible name of the copy button. Default "Copy value". |
| trailing | ReactNode | Extra buttons or text after the built-in ones. |
| className | string | Classes merged onto the root element, after ikada's own. |
| style | CSSProperties | ((state: InputState) => CSSProperties) | Style applied to the element, or a function that returns a style object based on the component's state. |
| render | ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, InputState> | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| invalid | boolean | Marks the field invalid: danger ring and aria-invalid. Prefer the Field error. |
| mono | boolean | Monospace face for ids, keys and hashes. |
Also takes every prop of Omit<InputProps, "type">.